Progress
Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Color variations (thick)
<!-- 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>