Progress Bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Default Progress Bars
Default progress bars are simple and css driven.
Primary with progress-bar-primaryclass.
Info with progress-bar-infoclass.
Success with progress-bar-successclass.
Warning with progress-bar-warningclass.
Danger with progress-bar-dangerclass.
Inverse with progress-bar-inverseclass.
<div class="progress"> <div class="progress-bar progress-bar-primary" style="width: 20%"></div> </div>
Striped Progress Bars
Sriped Progress bars made with CSS3 gradients, just add the progress-stripedclass
NoteDoes not work with browsers that do not support CSS3 gradients or animations, like IE9
Info
Animated Progressbars
Animated progressbars with CSS3, just add a class activewith progress-striped
Inverse
Stacking progressbars
You can stack one progressbar on top of another simply by including them all in the same div.progress