Twitter bootstrap progress bar animation on page load

Question

I have a page with several bootstrap progress bars. Setting their values initially works fine. Though I would like the progress bars to animate/transition to their specific states when a user opens the page.

This JS works fine, when you click on one of the bars. I would need something like that on an "onload" event of the bar. But the "onload" event is not available for s

//animate progress bars $('.progress .bar').on("click", function(event) {   var me = $(this);   perc = me.attr("data-percentage");   me.css('width', perc+'%'); }); 

How can I achieve this behavior on page load for all progress bars on a page?

Answer 1

EDIT

• Class name changed from bar to progress-bar in v3.1.1

HTML

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

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');  .container {     margin-top: 30px;     width: 400px; }​ 

jQuery used in the fiddle below and on the document.ready

$(document).ready(function(){      var progress = setInterval(function() {         var $bar = $('.bar');          if ($bar.width()>=400) {             clearInterval(progress);             $('.progress').removeClass('active');         } else {             $bar.width($bar.width()+40);         }         $bar.text($bar.width()/4 + "%");     }, 800);  });​ 

Demo

JSFiddle

Updated JSFiddle

Answer 2

While Tats_innit's answer has a nice touch to it, I had to do it a bit differently since I have more than one progress bar on the page.

here's my solution:

JSfiddle: http://jsfiddle.net/vacNJ/

HTML (example):

<div class="progress progress-success"> <div class="bar" style="float: left; width: 0%; " data-percentage="60"></div> </div>  <div class="progress progress-success"> <div class="bar" style="float: left; width: 0%; " data-percentage="50"></div> </div>  <div class="progress progress-success"> <div class="bar" style="float: left; width: 0%; " data-percentage="40"></div> </div> 

​

JavaScript:

setTimeout(function(){      $('.progress .bar').each(function() {         var me = $(this);         var perc = me.attr("data-percentage");          var current_perc = 0;          var progress = setInterval(function() {             if (current_perc>=perc) {                 clearInterval(progress);             } else {                 current_perc +=1;                 me.css('width', (current_perc)+'%');             }              me.text((current_perc)+'%');          }, 50);      });  },300); 

@Tats_innit: Using setInterval() to dynamically recalc the progress is a nice solution, thx mate! ;)

EDIT:

A friend of mine wrote a nice jquery plugin for custom twitter bootstrap progress bars. Here's a demo: http://minddust.github.com/bootstrap-progressbar/

Here's the Github repo: https://github.com/minddust/bootstrap-progressbar