Как анимировать индикатор выполнения в Bootstrap 3?
Я пытаюсь анимировать индикатор выполнения Bootstrap, но я не уверен, как это сделать.
Я получил значение ширины, ноconsole.log(bar_width);
возвращает ширину вpx
но нет%
как показано в строкеstyle="width:90%
.
Я воссоздал загрузочный с кодом:BootStrap Progress Bar
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' });
});
});