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

User · Accepted Answer

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     lt div class  progress progress-success  gt   lt div class  bar  style  float  left  width  0     data-percentage  60  gt  lt  div gt   lt  div gt    lt div class  progress progress-success  gt   lt div class  bar  style  float  left  width  0     data-percentage  50  gt  lt  div gt   lt  div gt    lt div class  progress progress-success  gt   lt div class  bar  style  float  left  width  0     data-percentage  40  gt  lt  div gt   lt  div gt       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 gt  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

User · Answer

Here s a cross-browser CSS-only solution  Hope it helps   DEMO   x000D   x000D   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    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  container  gt  x000D     x000D     lt h3 gt Progress bar animation on load lt  h3 gt  x000D     x000D     lt div class  progress  gt  x000D       lt div class  progress-bar progress-bar-success  style  width  75    gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

EDIT   Class name changed from bar to progress-bar in v3 1 1   HTML   lt div class  container  gt       lt div class  progress progress-striped active  gt           lt div class  bar  style  width  0    gt  lt  div gt       lt  div gt   lt  div gt     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   gt  400                clearInterval progress                   progress   removeClass  active              else                bar width  bar width   40                      bar text  bar width   4                800           Demo  JSFiddle   Updated JSFiddle

User · Answer

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

[javascript] Twitter bootstrap progress bar animation on page load

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap