Progress

How it works

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use the HTML5 progress element, ensuring you can stack progress bars, animate them, and place text labels over them.

Basic example

Use the border spinners for a lightweight loading indicator.

<x-progress />
<x-progress class="mt-3" value="25" style="height: 5px" />

<div class="progress">
  <div class="progress-bar bg-primary"
       role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mt-3"
     style="height: 5px">
  <div style="width: 25%"
       class="progress-bar bg-primary"
       role="progressbar"
       aria-valuenow="25"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

Set default value, min and max example

If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

<x-progress class="mb-3" value="25" />
<x-progress class="mb-3" value="50" min="25" />
<x-progress value="75" max="90" />

<div class="progress mb-3">
  <div style="width: 25%"
       class="progress-bar bg-primary"
       role="progressbar"
       aria-valuenow="25"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mb-3">
  <div style="width: 50%"
       class="progress-bar bg-primary"
       role="progressbar"
       aria-valuenow="50"
       aria-valuemin="25"
       aria-valuemax="100">
  </div>
</div>

<div class="progress">
  <div style="width: 75%"
       class="progress-bar bg-primary"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="90">
  </div>
</div>

Colored

The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of Bootstrap text color utilities on the standard spinner.

<x-progress color="primary" class="mb-3" value="75" />
<x-progress color="secondary" class="mb-3" value="75" />
<x-progress color="success" class="mb-3" value="75" />
<x-progress color="danger" class="mb-3" value="75" />
<x-progress color="warning" class="mb-3" value="75" />
<x-progress color="info" class="mb-3" value="75" />
<x-progress color="light" class="mb-3" value="75" />
<x-progress color="dark" class="mb-3" value="75" />

<div class="progress mb-3">
  <div style="width: 75%"
       class="progress-bar bg-primary"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mb-3">
  <div style="width: 75%"
       class="progress-bar bg-secondary"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mb-3">
  <div style="width: 75%"
       class="progress-bar bg-success"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mb-3">
  <div style="width: 75%"
       class="progress-bar bg-danger"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mb-3">
  <div style="width: 75%"
       class="progress-bar bg-warning"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mb-3">
  <div style="width: 75%"
       class="progress-bar bg-info"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mb-3">
  <div style="width: 75%"
       class="progress-bar bg-light"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress mb-3">
  <div style="width: 75%"
       class="progress-bar bg-dark"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

Stripped and animated example

Add prop small or pass custom width and height via style attribute to make a smaller spinner that can quickly be used within other components.

<x-progress class="mb-3" value="50" striped />
<x-progress value="75" animated />

<div class="progress mb-3"
     striped="striped">
  <div style="width: 50%"
       class="progress-bar progress-bar-striped bg-primary"
       role="progressbar"
       aria-valuenow="50"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>

<div class="progress"
     animated="animated">
  <div style="width: 75%"
       class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
       role="progressbar"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">
  </div>
</div>