Basic Progress
Create a progress bar with Bootstrap using
.progressand
.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>