Nearby lessons
14 of 39📊 BS5 Progress Bars
📌 What Are Bootstrap 5 Progress Bars?
Progress bars show how much of a task is complete. Use .progress as the outer wrapper and .progress-bar inside. Set the filled amount with style="width: 50%" (or any percentage).
📊 Basic Progress Bar (.progress, .progress-bar)
.progress – wrapper that creates the track (background).
.progress-bar – the filled part. Use inline width: X% to set progress. Add role="progressbar" and aria-valuenow, aria-valuemin, aria-valuemax for accessibility.
🎨 Progress Bar Colors (.bg-success, .bg-info, etc.)
Add background color classes to .progress-bar: .bg-success, .bg-info, .bg-warning, .bg-danger to show status (e.g. green when complete).
📐 Striped Progress Bar (.progress-bar-striped)
.progress-bar-striped – adds diagonal stripes to the bar. Use with .progress-bar.
▶️ Animated Progress Bar (.progress-bar-animated)
.progress-bar-animated – animates the stripes. Use together with .progress-bar-striped for a moving effect (good for “in progress” state).
📏 Multiple Bars in One (.progress with several .progress-bar)
Put several .progress-bar elements inside one .progress to show stacked segments (e.g. different tasks in one bar). Each bar’s width adds up to 100% or less.
📐 Progress Bar Height
Bootstrap 5 uses a default height for .progress. Override with a custom style, e.g. style="height: 20px" on the .progress element.
✅ Progress Bar Best Practices
- Use ARIA: Add
role="progressbar",aria-valuenow,aria-valuemin,aria-valuemax. - Show labels: Put text inside .progress-bar (e.g. "50%") when it fits.
- Match color to meaning: Use success for complete, danger for errors, etc.
- Use striped + animated for “loading” or “in progress” states.