Default
Track completion with a simple bar from empty to full.
With value
Show the exact percentage as the progress-bar text inside a larger bar.
Colors
Match the bar color to the context with any theme color.
Sizes
Scale a bar from progress-sm to progress-xl.
Indeterminate
Animate a bar with no known end point with progress-bar-indeterminate.
Multiple values
Stack several segments in one bar to compare parts of a whole.
Striped
Add diagonal stripes with progress-bar-striped for a textured look.
Animated
Combine progress-bar-striped with progress-bar-animated to keep the stripes moving.
Animated with JavaScript
Update the bar's width at runtime and watch it react.
Steps Progress
Mark discrete steps instead of a continuous percentage.
- Step 1
- Step 2
- Step 3
- Step 1
- Step 2
- Step 3
- Step 4
- Step 5
- Step 1
- Step 2
- Step 3
- Step 4
- Step 5
- Step 6
- Step 7
- Step 8
- Step 9
- Step 10
- Step 1
- Step 2
- Step 3
- Step 4
- Step 5
- Step 6
- Step 7
- Step 8
Progress Background
Fill a row's background as the progress indicator itself.
Progress Background Colors
Pair a light background fill with a matching accent color.
Progress Description
Pair a label and percentage with the bar for more context.
Progress Description Sizes
Scale the labeled progress bar from progress-sm to progress-xl.