Finder v2.0.0
Buy now
Bootstrap docs

Progress

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

Color variations (thick)

45%
55%
40%
70%
60%
33%
33%
<!-- Primary (default) progress bar -->
<div class="progress mb-3" role="progressbar" aria-label="Primary (default) example" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar fw-medium rounded-pill" style="width: 45%">45%</div>
</div>

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

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

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

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

<!-- Dark progress bar that switches to light color in dark mode -->
<div class="progress mb-3" role="progressbar" aria-label="Dark example" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-dark fw-medium rounded-pill d-none-dark" style="width: 33%">33%</div>
  <div class="progress-bar bg-light text-dark fw-medium rounded-pill d-none d-block-dark" style="width: 33%">33%</div>
</div>

Color variations (thin)

45%
55%
40%
70%
60%
33%
<!-- Primary (default) progress bar -->
<div class="fs-sm mb-2">45%</div>
<div class="progress mb-3" role="progressbar" aria-label="Primary (default) example" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
  <div class="progress-bar rounded-pill" style="width: 45%"></div>
</div>

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

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

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

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

<!-- Dark progress bar that switches to light color in dark mode -->
<div class="fs-sm mb-2">33%</div>
<div class="progress mb-3" role="progressbar" aria-label="Dark example" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
  <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 33%"></div>
  <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 33%"></div>
</div>

Multiple bars

<!-- Thick (default) stacked bars -->
<div class="progress-stacked mb-3">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment four" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
    <div class="progress-bar bg-warning"></div>
  </div>
</div>

<!-- Thin stacked bars -->
<div class="progress-stacked mb-3" style="height: 4px">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
    <div class="progress-bar bg-warning"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment four" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Animated striped bars

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

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

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

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

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

<!-- Striped dark progress bar that switches to light color in dark mode -->
<div class="progress mb-3" role="progressbar" aria-label="Animated striped dark progress" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-dark d-none-dark" style="width: 33%"></div>
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-light d-none d-block-dark" style="width: 33%"></div>
</div>

Use case: Rating breakdown

4.5
76 reviews
5
44
4
17
3
9
2
4
1
2
<div class="row g-4">
  <div class="col-sm-5 col-md-3">

    <!-- Overall rating card -->
    <div class="d-flex flex-column align-items-center justify-content-center h-100 bg-body-tertiary rounded p-4">
      <div class="h1 pb-2 mb-1">4.5</div>
      <div class="hstack justify-content-center gap-1 fs-sm mb-2">
        <i class="fi-star-filled text-warning"></i>
        <i class="fi-star-filled text-warning"></i>
        <i class="fi-star-filled text-warning"></i>
        <i class="fi-star-filled text-warning"></i>
        <i class="fi-star-half text-warning"></i>
      </div>
      <div class="fs-sm">76 reviews</div>
    </div>
  </div>
  <div class="col-sm-7 col-md-9">

    <!-- Rating breakdown by quantity -->
    <div class="vstack gap-3">

      <!-- 5 stars -->
      <div class="hstack gap-2">
        <div class="hstack fs-sm gap-1">
          5<i class="fi-star-filled text-warning"></i>
        </div>
        <div class="progress w-100" role="progressbar" aria-label="Five stars" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
          <div class="progress-bar bg-warning rounded-pill" style="width: 58%"></div>
        </div>
        <div class="fs-sm text-nowrap text-end" style="width: 40px;">44</div>
      </div>

      <!-- 4 stars -->
      <div class="hstack gap-2">
        <div class="hstack fs-sm gap-1">
          4<i class="fi-star-filled text-warning"></i>
        </div>
        <div class="progress w-100" role="progressbar" aria-label="Four stars" aria-valuenow="22.4" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
          <div class="progress-bar bg-warning rounded-pill" style="width: 22.4%"></div>
        </div>
        <div class="fs-sm text-nowrap text-end" style="width: 40px;">17</div>
      </div>

      <!-- 3 stars -->
      <div class="hstack gap-2">
        <div class="hstack fs-sm gap-1">
          3<i class="fi-star-filled text-warning"></i>
        </div>
        <div class="progress w-100" role="progressbar" aria-label="Three stars" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
          <div class="progress-bar bg-warning rounded-pill" style="width: 12%"></div>
        </div>
        <div class="fs-sm text-nowrap text-end" style="width: 40px;">9</div>
      </div>

      <!-- 2 stars -->
      <div class="hstack gap-2">
        <div class="hstack fs-sm gap-1">
          2<i class="fi-star-filled text-warning"></i>
        </div>
        <div class="progress w-100" role="progressbar" aria-label="Two stars" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
          <div class="progress-bar bg-warning rounded-pill" style="width: 5%"></div>
        </div>
        <div class="fs-sm text-nowrap text-end" style="width: 40px;">4</div>
      </div>

      <!-- 1 star -->
      <div class="hstack gap-2">
        <div class="hstack fs-sm gap-1">
          1<i class="fi-star-filled text-warning"></i>
        </div>
        <div class="progress w-100" role="progressbar" aria-label="One star" aria-valuenow="2.6" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
          <div class="progress-bar bg-warning rounded-pill" style="width: 2.6%"></div>
        </div>
        <div class="fs-sm text-nowrap text-end" style="width: 40px;">2</div>
      </div>
    </div>
  </div>
</div>

Circular progress: Colors

45%
55%
40%
70%
60%
33%
<!-- Primary circular progress -->
<div class="circular-progress text-primary" role="progressbar" style="--fn-progress: 45" aria-label="Primary progress" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle text-center mb-0">45%</h5>
</div>

<!-- Success circular progress -->
<div class="circular-progress text-success" role="progressbar" style="--fn-progress: 55" aria-label="Success progress" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle text-center mb-0">55%</h5>
</div>

<!-- Danger circular progress -->
<div class="circular-progress text-danger" role="progressbar" style="--fn-progress: 40" aria-label="Danger progress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle text-center mb-0">40%</h5>
</div>

<!-- Warning circular progress -->
<div class="circular-progress text-warning" role="progressbar" style="--fn-progress: 70" aria-label="Warning progress" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle text-center mb-0">70%</h5>
</div>

<!-- Info circular progress -->
<div class="circular-progress text-info" role="progressbar" style="--fn-progress: 60" aria-label="Info progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle text-center mb-0">60%</h5>
</div>

<!-- Dark circular progress -->
<div class="circular-progress text-dark-emphasis" role="progressbar" style="--fn-progress: 33" aria-label="Dark progress" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle text-center mb-0">33%</h5>
</div>

Circular progress: Sizes

60%
60%
60%
60%
<!-- Use --fn-progress-size CSS variable to adjust circular progress size -->

<!-- 48px -->
<div class="circular-progress text-secondary" role="progressbar" style="--fn-progress-size: 48px; --fn-progress: 60" aria-label="48px progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle fs-xs text-center mb-0">60%</h5>
</div>

<!-- 72px -->
<div class="circular-progress text-secondary" role="progressbar" style="--fn-progress-size: 72px; --fn-progress: 60" aria-label="72px progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle fs-base text-center mb-0">60%</h5>
</div>

<!-- 96px (default) -->
<div class="circular-progress text-secondary" role="progressbar" style="--fn-progress: 60" aria-label="96px progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle text-center mb-0">60%</h5>
</div>

<!-- 120px -->
<div class="circular-progress text-secondary" role="progressbar" style="--fn-progress-size: 120px; --fn-progress: 60" aria-label="120px progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle h4 text-center mb-0">60%</h5>
</div>

Circular progress: Bar width

60%
60%
<!-- Use --fn-progress-bar-width CSS variable to adjust circular progress bar width -->

<!-- Thick bar (14px) -->
<div class="circular-progress text-primary" role="progressbar" style="--fn-progress-bar-width: 14px; --fn-progress: 60" aria-label="Thick bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle text-center mb-0">60%</h5>
</div>

<!-- Thin bar (4px) -->
<div class="circular-progress text-primary" role="progressbar" style="--fn-progress-bar-width: 4px; --fn-progress: 60" aria-label="Thin bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <svg class="progress-circle">
    <circle class="progress-background" r="0"></circle>
    <circle class="progress-bar" r="0"></circle>
  </svg>
  <h5 class="position-absolute top-50 start-50 translate-middle fw-normal text-center mb-0">60%</h5>
</div>
Top