How to animate a progress bar in Bootstrap 3?

Question

I am trying to animate Bootstrap progress bar, but I\'m not sure how to do that.

I got the value of the width but console.log(bar_width); returns the width

Answer 1

You could use setInterval timer and increase the width at some interval until it reaches a max width..

$('.progress-bar').each(function() {
    var $bar = $(this);
    var progress = setInterval(function() {

      var currWidth = parseInt($bar.attr('aria-valuenow'));
      var maxWidth = parseInt($bar.attr('aria-valuemax'));

      //update the progress
        $bar.width(currWidth+'%');
        $bar.attr('aria-valuenow',currWidth+10);

      //clear timer when max is reach
      if (currWidth >= maxWidth){
        clearInterval(progress);
      }

    }, 500);
});

http://bootply.com/tC8sgQRwDD#