Basic Progress
Create a
progress bar
with Bootstrap using
.progress
and
.progress-bar
classes. Set the width of the progress bar with inline styles or utility classes to show progress.
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%"></div>
</div>Colored Progress
Use
colored progress bars
in Bootstrap by applying classes like
.bg-success
or
.bg-danger
to the
.progress-bar
for different colors.
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 100%"></div>
</div>Progress With Labels
Display
labels
on Bootstrap progress bars by adding text inside the
<div class="progress-bar">
. Use classes like
.text-white
for text color.
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-primary" style="width: 20%">20%</div>
</div>
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 40%">40%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 60%">60%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning" style="width: 80%">80%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>Progress size
Easily adjust the size of progress bars using custom classes. The
.progress-xs
class represents an extra small progress bar, perfect for compact layouts.
<div class="progress progress-xs" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 20%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 40%"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 60%"></div>
</div>
<div class="progress progress-lg" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 80%"></div>
</div>
<div class="progress progress-xl" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%"></div>
</div>Striped Progress
Create
striped progress bars
in Bootstrap by adding the
.progress-bar-striped
class to your
<div class="progress-bar">
. This adds a striped pattern to the progress bar for a dynamic look.
<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>Animated Striped Progress
Add
animation
to striped progress bars in Bootstrap by using
.progress-bar-animated
with
.progress-bar-striped
. This makes the stripes move, creating a dynamic effect.
<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 100%"></div>
</div>Default Circle Progress Bar
Use the
custom circle progress bar
by adding a
.circular-progress
class. Inside, use an
<svg>
element with
<circle>
elements for the background and foreground to visually display progress.
<div class="circular-progress">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
</div>
<div class="circular-progress" style="--progress: 70;">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">70%</div>
</div>Circle Size Progress
Use
size classes
like
.circular-*
to adjust the circle progress bar size in Bootstrap. Apply it to
.circular-progress
for a larger display.
<div class="d-flex align-items-center gap-3">
<div class="circular-progress circular-xxl">
<svg class="circular-inner" viewBox="0 0 130 130">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">40%</div>
</div>
<div class="circular-progress circular-xl">
<svg class="circular-inner" viewBox="0 0 110 110">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">40%</div>
</div>
<div class="circular-progress circular-progress-secondary">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">40%</div>
</div>
<div class="circular-progress circular-md">
<svg class="circular-inner" viewBox="0 0 76 76">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">40%</div>
</div>
<div class="circular-progress circular-sm">
<svg class="circular-inner" viewBox="0 0 56 56">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">40%</div>
</div>
</div>Circle Color Progress
Change the
color
of your circle progress bar using the
.circular-progress-*
class. Apply this class to
.circular-progress
for a color scheme.
<div class="circular-progress circular-progress-primary" style="--progress: 10;">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">10%</div>
</div>
<div class="circular-progress circular-progress-secondary" style="--progress: 70;">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">70%</div>
</div>
<div class="circular-progress circular-progress-success" style="--progress: 40;">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">40%</div>
</div>
<div class="circular-progress circular-progress-info" style="--progress: 22;">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">22%</div>
</div>
<div class="circular-progress circular-progress-warning" style="--progress: 90;">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">90%</div>
</div>
<div class="circular-progress circular-progress-danger" style="--progress: 40;">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">40%</div>
</div>
<div class="circular-progress circular-progress-dark" style="--progress: 50;">
<svg class="circular-inner" viewBox="0 0 90 90">
<circle class="bg-circular-progress"></circle>
<circle class="fg-circular-progress"></circle>
</svg>
<div class="circular-text">50%</div>
</div>