Progress
Linear bars, sizes, tones, labels, gradients, animated stripes, and circular SVG progress indicators.
Basic Bar
The core Progress component
Sizes
sm, md (default), lg
sm65%
md45%
lg78%
Tones
Six color tones
Brand60%
Success85%
Warning42%
Error28%
Purple73%
Orange55%
With Label & Percentage
Inline context above the bar
Storage used6.8 GB of 10 GB
68%
Onboarding complete9 of 10 steps
90%
Monthly quota1,700 of 5,000 API calls
34%
Gradient
Soft two-stop gradient fills
Brand60%
Success85%
Warning42%
Error28%
Purple73%
Orange55%
Striped & Animated
Diagonal stripes scrolling left-to-right
Stripes animate continuously to convey active processing — use sparingly to avoid distraction.
Live Upload
A simulated async task with the bar bound to state
project-files.zipIdle
0%
Click Upload to begin.
Circular Progress
SVG ring with center label
72%Storage
88%Health
34%Quota
100%Synced
Anatomy & Tips
When to use which style
Linear bar
Use for determinate tasks where the percentage is known. Combine with a label for context.
Striped / animated
Reserve for long-running uploads or background syncs to signal liveness.
Circular
Best for dashboard widgets & small panels where vertical space is limited.
Indeterminate
If the total is unknown, use a Spinner instead of a partially-filled bar.