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.
Bootstrap 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
- Loading state for async operations
Variants and classes
| Variant | Description and classes |
|---|---|
| Basic progress | Simple filled bar with width percentage.progress + progress-bar + style="width: 65%" |
| Labelled progress | Percentage or text label inside the bar.progress + progress-bar |
| Striped progress | Diagonal stripe pattern fill.progress-bar progress-bar-striped |
| Animated stripes | Moving stripe animation for active tasks.progress-bar progress-bar-striped progress-bar-animated |
| Stacked progress | Several coloured segments in one bar. Bootstrap 5.3 wraps each segment in its own .progress.progress-stacked + progress + progress-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.
Labelled and striped bars
Labels inside the bar plus the ARIA attributes Bootstrap 5.3 expects on the .progress wrapper.
Animated Upload
Striped animated progress bar showing an active file upload process.
Stacked Segments
Multiple colours in one bar, useful for combined metrics. Bootstrap 5.3 wraps each segment in its own .progress inside .progress-stacked.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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
- Loading bar for AJAX content
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 to 24px for label readability.
Always include ARIA attributes
Add role='progressbar', aria-valuenow, aria-valuemin='0', aria-valuemax='100' and an aria-label to each .progress wrapper (Bootstrap 5.3 moved them there from .progress-bar). They 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.