Loading...
Around UI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Progress

Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Bootstrap docs

Color variation (thick)

45%
55%
40%
70%
60%
33%
<!-- Primary progress bar -->
<div class="progress mb-3">
  <div class="progress-bar fw-semibold" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    45%
  </div>
</div>

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

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

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

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

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

Color variation (thin)

45%
55%
40%
70%
60%
33%
<!-- Primary progress bar -->
<div class="fs-sm fw-semibold mb-2">45%</div>
<div class="progress mb-3" style="height: 4px;">
  <div class="progress-bar" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Success progress bar -->
<div class="fs-sm fw-semibold mb-2">55%</div>
<div class="progress mb-3" style="height: 4px;">
  <div class="progress-bar bg-success" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Danger progress bar -->
<div class="fs-sm fw-semibold mb-2">40%</div>
<div class="progress mb-3" style="height: 4px;">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Warning progress bar -->
<div class="fs-sm fw-semibold mb-2">70%</div>
<div class="progress mb-3" style="height: 4px;">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Info progress bar -->
<div class="fs-sm fw-semibold mb-2">60%</div>
<div class="progress mb-3" style="height: 4px;">
  <div class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Dark progress bar -->
<div class="fs-sm fw-semibold mb-2">33%</div>
<div class="progress mb-3" style="height: 4px;">
  <div class="progress-bar bg-dark" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Multiple bars

<!-- Thick bars -->
<div class="progress mb-3">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Thin bars -->
<div class="progress mb-3" style="height: 2px;">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-danger" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animated striped bars

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

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

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

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

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

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

Use case: Rating breakdown

5
43
4
16
3
9
2
4
1
2 
<!-- 5 stars -->
<div class="d-flex align-items-center mb-2">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle">5</span>
    <i class="ai-star fs-sm ms-1"></i>
  </div>
  <div class="w-100">
    <div class="progress" style="height: 4px;">
      <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <span class="ms-3">43</span>
</div>

<!-- 4 stars -->
<div class="d-flex align-items-center mb-2">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle">4</span>
    <i class="ai-star fs-sm ms-1"></i>
  </div>
  <div class="w-100">
    <div class="progress" style="height: 4px;">
      <div class="progress-bar" role="progressbar" style="width: 27%; background-color: #a7e453;" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <span class="ms-3">16</span>
</div>

<!-- 3 stars -->
<div class="d-flex align-items-center mb-2">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle">3</span>
    <i class="ai-star fs-sm ms-1"></i>
  </div>
  <div class="w-100">
    <div class="progress" style="height: 4px;">
      <div class="progress-bar bg-warning" role="progressbar" style="width: 17%;" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <span class="ms-3">9</span>
</div>

<!-- 2 stars -->
<div class="d-flex align-items-center mb-2">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle">2</span>
    <i class="ai-star fs-sm ms-1"></i>
  </div>
  <div class="w-100">
    <div class="progress" style="height: 4px;">
      <div class="progress-bar" role="progressbar" style="width: 9%; background-color: #fa8027;" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <span class="ms-3">4</span>
</div>

<!-- 1 star -->
<div class="d-flex align-items-center">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle">1</span>
    <i class="ai-star fs-sm ms-1"></i>
  </div>
  <div class="w-100">
    <div class="progress" style="height: 4px;">
      <div class="progress-bar bg-danger" role="progressbar" style="width: 4%;" aria-valuenow="4" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <span class="ms-3">2</span>
</div>