Progress

Stylize the HTML5 <progress> element with a few extra classes and some crafty browser-specific CSS.

Horizontal example

To caption a progress bar, simply add a <div> with your caption text, align the text using a utility class, and associate the caption with the HTML5 <progress> element using the aria-describedby attribute.

Loading… 0%

Loading… 25%

Loading… 50%

Loading… 100%

<div id="example-caption-1">Loading&hellip; 0%</div>
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>

<div id="example-caption-2">Loading&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>

<div id="example-caption-3">Loading&hellip; 50%</div>
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>

<div id="example-caption-5">Loading&hellip; 100%</div>
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>

Contextual alternatives

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

<progress class="progress progress-success" value="25" max="100"></progress> 
<progress class="progress progress-warning" value="75" max="100"></progress>
<progress class="progress progress-danger" value="100" max="100"></progress>

Vertical example

<div class="progress progress-bar-vertical mr-2">
  <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%;">
    <span class="sr-only">20% Complete</span>
  </div>
</div>

<div class="progress progress-bar-vertical mr-2">
  <div class="progress-bar progress-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%;">
    <span class="sr-only">40% Complete</span>
  </div>
</div> 

<div class="progress progress-bar-vertical mr-2">
  <div class="progress-bar progress-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 80%;">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

<div class="progress progress-bar-vertical">
  <div class="progress-bar progress-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 100%;">
    <span class="sr-only">100% Complete</span>
  </div>
</div>

Semantic and Accessibility

A progressbar indicates that the user's request has been received and the application is making progress toward completing the requested action. If the actual value of the progressbar can be determined, the developer has to indicate this progress using the aria-valuenow, aria-valuemin, and aria-valuemaxattributes. If the progress value is indeterminate, the developer should omit the aria-valuenow attribute.

aria-valuenow: Used to define the current value for a range widget;
aria-valuemin: Used to define the minimum value allowed for a range widget
aria-valuemax: Used to define the maximum value allowed for a range widget;
sr-only: Hide an element to all devices except screen readers.

Learn more: ARIA Techniques

Progress steps

<div class="progress-steps">
  <span class="step success tooltip-test" data-toggle="tooltip" data-placement="top" title="Step 1 completed"></span>
  <span class="step success tooltip-test" data-toggle="tooltip" data-placement="top" title="Step 2 completed"></span>
  <span class="step success tooltip-test" data-toggle="tooltip" data-placement="top" title="Step 3 completed"></span>
  <span class="step"></span>
  <span class="step"></span>
</div>

<div class="progress-steps">
  <span class="step warning"></span>
  <span class="step warning"></span>
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
</div>