¿Cómo animar una barra de progreso en Bootstrap 3?
Estoy tratando de animar la barra de progreso de Bootstrap, pero no estoy seguro de cómo hacerlo.
Obtuve el valor del ancho peroconsole.log(bar_width);
devuelve el ancho enpx
pero no%
como se muestra en líneastyle="width:90%
.
Recreé un bootply con el código:Barra de progreso de BootStrap
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' });
});
});