Progress bars

Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.

Default markup

To create a default progress bar, add a .progress class to a <div> element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.

<div class="progress">
  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
    <span class="visually-hidden">38% Complete</span>
  </div>
</div>

Progress size

Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.

<div class="progress progress-sm">
  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
    <span class="visually-hidden">57% Complete</span>
  </div>
</div>

Progress without value

Remove the displayed value by adding the .visually-hidden class.

<div class="progress">
  <div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
    <span class="visually-hidden">75% Complete</span>
  </div>
</div>

Indeterminate progress

You can create a progress bar which shows indeterminate progress by adding .progress-bar-indeterminate to the .progress-bar element.

<div class="progress progress-sm">
  <div class="progress-bar progress-bar-indeterminate"></div>
</div>

Native progress element

You can also use native HTML5 <progress> element.

<progress class="progress progress-sm" value="15" max="100" />

Progress color

Customize the color of the progress bar to suit your design. Click here to see the list of available colors.

<div class="progress">
  <div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete">
    <span class="visually-hidden">24% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete">
    <span class="visually-hidden">45% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete">
    <span class="visually-hidden">64% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-blue" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
    <span class="visually-hidden">38% Complete</span>
  </div>
</div>