Question

Would it be possible to make a Bootstrap progress bar go to 100% every say 5 seconds

    <div class="progress progress-striped active">
      <div class="bar" style="width: 40%;"></div>
        </div>

The progress bar is filled via the width style, so above would put It at 40% complete

How would I make it smoothly load up-to 100% in 5seconds, then reset back to 0 and start again, repeatedly?

Thanks.

Answer 1

In this answer I modified @Blender’s approach a little to run forever.

For this I’m using complete argument of animate function.
http://jsfiddle.net/xXM2z/490/
full JS code:

$(document).ready(function(){
   animateScroll();
});

function animateScroll()
    {
    $('.bar').animate({
    width: '100%'
}, {
    duration: 5000,
    easing: 'linear',
    complete:function(){ $(this).css("width","0%");
   }
});
animateScroll();
}