Progress Bar

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Default progress bar.

<progress>
<bar value="60"></bar>
</progress>

<progress>
<bar value="60" showvalue="true"></bar>
</progress>

Progress bars use some of the same button and alert classes for consistent styles.

<progress>
<bar value="40" type="success"></bar>
</progress>
 
<progress>
<bar value="20" type="info"></bar>
</progress>
 
<progress>
<bar value="60" type="warning"></bar>
</progress>
 
<progress>
<bar value="80" type="danger"></bar>
</progress>

Uses a gradient to create a striped effect. Not available in IE9 and below.

<progress>
<bar value="40" type="success" striped="true"></bar>
</progress>
 
<progress>
<bar value="20" type="info" striped="true"></bar>
</progress>
 
<progress>
<bar value="60" type="warning" striped="true"></bar>
</progress>
 
<progress>
<bar value="80" type="danger" striped="true"></bar>
</progress>

Add animate=“true” to a striped progress bar to animate the stripes right to left. Not available in IE9 and below.

<progress>
<bar value="45" type="info" striped="true" animate="true"></bar>
</progress>

Place multiple bars into the same <progress/> tag to stack them.

<progress>
<bar value="35" type="success" striped="true"></bar>
<bar value="20" type="warning" striped="true"></bar>
<bar value="10" type="danger" striped="true"></bar>
</progress>