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.

<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