Default
Track completion with a simple bar from empty to full.
With value
Show the exact percentage inside a larger bar with showValue.
Colors
Match the bar color to the context with any theme color.
Sizes
Scale a bar from sm to xl.
Indeterminate
Animate a bar with no known end point using indeterminate.
Multiple values
Stack several segments in one bar to compare parts of a whole.
Striped
Add diagonal stripes with striped for a textured look.
Animated
Combine striped with 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 sm to xl.