Wie animiere ich einen Fortschrittsbalken in Bootstrap 3?
Ich versuche, die Bootstrap-Fortschrittsanzeige zu animieren, bin mir aber nicht sicher, wie ich das machen soll.
Ich habe den Wert der Breite aberconsole.log(bar_width);
gibt die Breite in @ zurüpx
aber nicht%
wie inline gezeigtstyle="width:90%
.
Ich habe einen Bootply mit dem Code neu erstellt:BootStrap Fortschrittsbalken
HTML:
<!-- Skills Progress Bar -->
<section id="skills-pgr">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width:90%">
<span>HTML/CSS</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85"
aria-valuemin="0" aria-valuemax="100" style="width:85%">
<span>Photography</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width:80%">
<span>CMS</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width:75%">
<span>JavaScript/jQuery</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
<span>Photoshop</span>
</div>
</div>
</section>
jQuery:
// Skills Progress Bar
$(function() {
$('.progress-bar').each(function() {
var bar_width = $(this).css('width'); // returns the css width value
var bar_value = $(this).attr('aria-valuenow');
console.log(bar_width);
console.log(bar_value);
$(this).animate({ value: bar_width }, { duration: 2000, easing: 'easeOutCirc' });
});
});