CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
SanderS
SanderS

Reputation: 47

Animating Bootstrap 3 progress bars with jQuery

I'm making a page with multiple Bootstrap 3 progress bars showing different % stats.

I'm trying to get each on of them to start from 0 and fill to the % of the bar as I have set them. Like so:

<h4>Bar 1</h4>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" ></div>
</div>

<h4>Bar 2</h4>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
</div>

I have been looking at ways to animate this with jQuery and found a few option which in my eyes should work, but don't. I tried the following:

$('.progress-bar').each(function() {
  var bar_value = $(this).attr('aria-valuenow') + '%';                
  $(this).animate({ width: bar_value }, { duration: 2000, easing: 'easeOutCirc' });
});

The person who posted this code said to remove the style within the HTML and so I did with Bar 1, no result. Also my console said

"Uncaught TypeError: n.easing[this.easing] is not a function".

Please help me!

Link to jsFiddle

Upvotes: 0

Views: 415

Answers (1)

Chandra Kumar
Chandra Kumar

Reputation: 4205

Try to use this code:

Here you can see working demo: https://output.jsbin.com/xenawut

https://jsbin.com/xenawut/2/edit?html,css,js

$(document).ready(function() {
  $('.progress .progress-bar').css("width",
        function() {
            return $(this).attr("aria-valuenow") + "%";
        }
    )
});

Upvotes: 1

Related Questions