Bootstrap Progress Bars
Bootstrap Progress Bars are used to visually represent the completion level of tasks such as file uploads, form completion, or system processes.
🎯 Basic Progress Bar
Use .progress as the wrapper and .progress-bar inside it.
➡ This shows a progress bar filled 60%.
🎨 Progress Bar with Label
You can display the percentage inside the bar:
🌈 Progress Bar Colors
Use contextual classes:
| Class | Meaning | Color |
|---|---|---|
progress-bar-primary | Primary | Blue |
progress-bar-success | Success | Green |
progress-bar-info | Info | Light Blue |
progress-bar-warning | Warning | Orange |
progress-bar-danger | Danger/Error | Red |
Example:
🚦 Striped Progress Bar
Add progress-bar-striped for animated stripes.
⚡ Animated Progress Bar
Add active to make the stripes move.
📊 Multiple Bars in One Progress Component
You can show multiple colored bars in a single progress section.
🎯 Progress Bar with Minimal Height Change
You can adjust the height using CSS:
✔ Summary
| Feature | Supported |
|---|---|
| Basic filled progress bar | ✔️ |
| With text/percentage | ✔️ |
| Contextual colors | ✔️ |
| Striped and animated | ✔️ |
| Multiple bar segments | ✔️ |
| Custom height | ✔️ |
