Twitter Bootstrap progress bars tutorial
Introduction
In this tutorial, you will see how to create progress bars for loading, redirecting, or action status, using Twitter Bootstrap.
Example of basic, striped and animated Progress bars
Notice that, in case of the third Progress bar shown, adding '.active' class makes it animated. Bootstrap uses css3 transitions for creating this animation. You may also adjust the width of the bar dynamically via JavaScript. This way, the behavior of the progress may be controlled.
You may use additional colors while creating progress bars.
Example of progress bars with additional colors
Browser support
We have tested both of the above examples with different browsers. We found that, it works perfectly with Firefox 12 and Chrome 19.0.1084.52 m. But it does not show the animation in Opera 11.62, though, you may see the stripes and gradients. In Internet Explorer 8, it does not look good at all. No animation, not even gradient or stripes
You may download all the HTML, CSS, JS and image files used in our tutorials here.
Previous: Twitter Bootstrap Thumbnails tutorial
Next:
Twitter Bootstrap breadcrumbs tutorial