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.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>