[javascript] Twitter bootstrap progress bar animation on page load

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?

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

In contribution to ellabeauty's answer. you can also use this dynamic percentage values

$('.bar').css('width',  function(){ return ($(this).attr('data-percentage')+'%')});

And probably add custom easing to your css

.bar {
 -webkit-transition: width 2.50s ease !important;
 -moz-transition: width 2.50s ease !important;
   -o-transition: width 2.50s ease !important;
      transition: width 2.50s ease !important;
 }

Bootstrap uses CSS3 transitions so progress bars are automatically animated when you set the width of .bar trough javascript / jQuery.

http://jsfiddle.net/3j5Je/ ..see?

Here's a cross-browser CSS-only solution. Hope it helps!

DEMO

.progress .progress-bar {_x000D_
    -moz-animation-name: animateBar;_x000D_
    -moz-animation-iteration-count: 1;_x000D_
    -moz-animation-timing-function: ease-in;_x000D_
    -moz-animation-duration: .4s;_x000D_
_x000D_
    -webkit-animation-name: animateBar;_x000D_
    -webkit-animation-iteration-count: 1;_x000D_
    -webkit-animation-timing-function: ease-in;_x000D_
    -webkit-animation-duration: .4s;_x000D_
_x000D_
    animation-name: animateBar;_x000D_
    animation-iteration-count: 1;_x000D_
    animation-timing-function: ease-in;_x000D_
    animation-duration: .4s;_x000D_
}_x000D_
_x000D_
@-moz-keyframes animateBar {_x000D_
    0% {-moz-transform: translateX(-100%);}_x000D_
    100% {-moz-transform: translateX(0);}_x000D_
}_x000D_
@-webkit-keyframes animateBar {_x000D_
    0% {-webkit-transform: translateX(-100%);}_x000D_
    100% {-webkit-transform: translateX(0);}_x000D_
}_x000D_
@keyframes animateBar {_x000D_
    0% {transform: translateX(-100%);}_x000D_
    100% {transform: translateX(0);}_x000D_
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="container">_x000D_
  _x000D_
  <h3>Progress bar animation on load</h3>_x000D_
  _x000D_
  <div class="progress">_x000D_
    <div class="progress-bar progress-bar-success" style="width: 75%;"></div>_x000D_
  </div>_x000D_
</div>