Bootstrap 5 Progress Bar
The Bootstrap 5 progress bar displays task completion or metric levels as a filled horizontal bar. Two components work together: .progress (the track/container) and .progress-bar (the fill). Bootstrap provides contextual colours, striped patterns, CSS animations, stacking multiple segments, and ARIA accessibility attributes out of the box.
Primary Class
.progress + .progress-barCommon Use Cases
- →File upload progress indicator
- →Profile completion percentage
- →Skill level bars on portfolio pages
- →Multi-step form step indicator
- →Campaign fundraising goal tracker
- →Course completion progress
Variants & Classes
| Variant | Description |
|---|---|
| Basic progress | Simple filled bar with width percentage. |
| Labelled progress | Percentage or text label inside the bar. |
| Striped progress | Diagonal stripe pattern fill. |
| Animated stripes | Moving stripe animation for active tasks. |
| Stacked progress | Multiple coloured segments in one bar. |
Code Example
<!-- Skill bars -->
<div class="mb-3">
<div class="d-flex justify-content-between small fw-semibold mb-1">
<span>HTML / CSS</span><span>95%</span>
</div>
<div class="progress" style="height:8px">
<div class="progress-bar bg-primary" style="width:95%"></div>
</div>
</div>
<!-- Animated upload progress -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info"
style="width:60%">60% uploaded</div>
</div>Live Examples
Skill Bars
Thin progress bars showing proficiency levels — common on portfolio and resume pages.
Animated Upload
Striped animated progress bar showing an active file upload process.
Stacked Segments
Multiple colours in one progress bar — useful for showing combined metrics.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Profile completion checklist with progress circle
- ✓Campaign goal progress with amount raised
- ✓Course module completion tracker
- ✓File upload with cancel button
- ✓Step wizard with connected progress bar
Best Practices
Set explicit height for thin skill bars
The default progress bar height is 1rem (16px). For elegant skill bars, use style='height:6px' or style='height:8px'. For upload indicators, keep the default or increase to 20–24px for label readability.
Always include ARIA attributes
Add role='progressbar', aria-valuenow, aria-valuemin='0', and aria-valuemax='100' to every progress-bar. These make the component accessible to screen readers and assistive technology.
Animate width with CSS transitions
For a smooth fill animation on page load, set the initial width to 0 and use JavaScript to update it after a short delay. Add transition: width 0.6s ease to .progress-bar for the animation effect.