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.1
68 reviews
5
37
4
16
3
9
2
4
1
3

    <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.1</div>
          <div class="hstack justify-content-center gap-1 fs-sm mb-2">
            <i class="ci-star-filled text-warning"></i>
            <i class="ci-star-filled text-warning"></i>
            <i class="ci-star-filled text-warning"></i>
            <i class="ci-star-filled text-warning"></i>
            <i class="ci-star text-body-tertiary opacity-60"></i>
          </div>
          <div class="fs-sm">68 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="ci-star-filled text-warning"></i>
            </div>
            <div class="progress w-100" role="progressbar" aria-label="Five stars" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
              <div class="progress-bar bg-warning rounded-pill" style="width: 54%"></div>
            </div>
            <div class="fs-sm text-nowrap text-end" style="width: 40px;">37</div>
          </div>

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

          <!-- 3 stars -->
          <div class="hstack gap-2">
            <div class="hstack fs-sm gap-1">
              3<i class="ci-star-filled text-warning"></i>
            </div>
            <div class="progress w-100" role="progressbar" aria-label="Three stars" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
              <div class="progress-bar bg-warning rounded-pill" style="width: 13%"></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="ci-star-filled text-warning"></i>
            </div>
            <div class="progress w-100" role="progressbar" aria-label="Two stars" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
              <div class="progress-bar bg-warning rounded-pill" style="width: 6%"></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="ci-star-filled text-warning"></i>
            </div>
            <div class="progress w-100" role="progressbar" aria-label="One star" aria-valuenow="3.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
              <div class="progress-bar bg-warning rounded-pill" style="width: 3.5%"></div>
            </div>
            <div class="fs-sm text-nowrap text-end" style="width: 40px;">3</div>
          </div>
        </div>
      </div>
    </div>

Top