Progress

Use progress to display the status of a task or process.

Examples

To render a progress element, use the progress HTML5 tag. Set the value attribute to the amount of work complete. The default color is green.

Base

0%
50%
100%
<h5>0%</h5>
<progress value="0" max="100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></progress>
<h5>50%</h5>
<progress value="50" max="100" max="100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></progress>
<h5>100%</h5>
<progress value="100" max="100" max="100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></progress>

States

To indicate a progress state, use the class -info, -warning, -danger, or -success.

Danger
Info
Warning
Success
<h5>Danger</h5>
<progress class="-danger" value="75" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>
<h5>Info</h5>
<progress class="-info" value="75" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>
<h5>Warning</h5>
<progress class="-warning" value="75" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>
<h5>Success</h5>
<progress class="-success" value="75" max="100" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>