Progress Bar

Show your progress. A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.

Basics

A progress bar has two elements: the container .progress, and the meter .progress-meter. The role and aria- attributes in the code example clarify the status of the bar:

• aria-valuemin: Minimum value.
• aria-valuemax: Maximum value.
• aria-valuenow: Current value.

If the value of the progress bar is not numeric, also add the attribute aria-valuetext, which should include a human-readable version of the bar's value.

<div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-meter"></div>
</div>

Add a width CSS property to the inner meter to fill the progress bar.

<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 50%"></div>
</div>

Colors

A progress bar can be styled with the .secondary, .success, .warning, and .alert colors.

<div class="secondary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 25%"></div>
</div>

<div class="success progress">
  <div class="progress-meter" style="width: 50%"></div>
</div>

<div class="warning progress">
  <div class="progress-meter" style="width: 50%"></div>
</div>

<div class="alert progress">
  <div class="progress-meter" style="width: 75%"></div>
</div>

With Text

You can add text inside the meter of a progress bar. Make sure the text you use in the meter is also used in the aria-valuetext attribute.

<div class="progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <span class="progress-meter" style="width: 25%">
    <p class="progress-meter-text">25%</p>
  </span>
</div>