Use progress to display the status of a task or process.
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.
<!-- 0% -->
<div class="a-label">0%</div>
<progress value="0" max="100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></progress>
<!-- 50% -->
<div class="a-label">50%</div>
<progress value="50" max="100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></progress>
<!-- 100% -->
<div class="a-label">100%</div>
<progress value="100" max="100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></progress>
To indicate a progress state, use the class -info, -warning, -danger, or -success.
<!-- Danger -->
<div class="a-label">Danger</div>
<progress class="-danger" value="75" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>
<!-- Info -->
<div class="a-label">Info</div>
<progress class="-info" value="75" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>
<!-- Warning -->
<div class="a-label">Warning</div>
<progress class="-warning" value="75" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>
<!-- Success -->
<div class="a-label">Success</div>
<progress class="-success" value="75" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>