Bootstrap 5 Progress Bar
Bootstrap 5 progress bars display the progress of a task or metric as a filled horizontal bar. They're used for upload/download status, profile completion indicators, skill rating displays, and multi-step form progress indicators. Bootstrap 5 uses the HTML5 progress element or a div-based approach.
Primary Class
.progress / .progress-barCommon Use Cases
- →File upload progress
- →Profile completion percentage
- →Skill level indicators
- →Multi-step form progress
- →Loading state for async operations
- →Statistics visualisation
Variants & Classes
| Variant | Description |
|---|---|
| Basic progress | Simple filled bar with percentage. |
| Labelled progress | Percentage label shown inside the bar. |
| Striped progress | Diagonal stripe pattern on the bar. |
| Animated striped | Moving stripe animation for active processes. |
| Stacked progress | Multiple segments in one bar. |
Code Example
<!-- Skill/stat progress 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>
<div class="mb-3">
<div class="d-flex justify-content-between small fw-semibold mb-1">
<span>JavaScript</span><span>82%</span>
</div>
<div class="progress" style="height:8px">
<div class="progress-bar bg-success" style="width:82%"></div>
</div>
</div>
<!-- Animated upload progress -->
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info"
style="width:60%" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
60% uploaded
</div>
</div>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
- ✓Skill bars on portfolio page
- ✓Multi-step form progress indicator
- ✓Campaign goal progress with raised amount
- ✓Loading bar for AJAX content
Best Practices
Set height to control bar thickness
Bootstrap progress bars have a default height of 1rem. Override with inline style='height:6px' or style='height:16px' for thicker or thinner bars. Thin bars (4–8px) are elegant for skill sections; thick bars (12–20px) are better for upload indicators.
Always include aria-valuenow, aria-valuemin, aria-valuemax
These ARIA attributes make progress bars accessible to screen readers. Bootstrap's examples include them by default — don't strip them.