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.
70%
<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.
40%
40%
40%
40%
40%
<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.
10%
70%
40%
22%
90%
40%
50%
<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>