Progress
v1.0.6Updated 19 Oct 2026Linear progress bar (Radix). Shows determinate or indeterminate task progress. Adds multi-segment bars, stepped indicators, a circular variant, striped fill, indeterminate mode, and tonal + size variants.
Preview
Live · 17 storiesDefaultOpen ↗
▸Why this is recommendedprogressloadingbarmulti-segment+3
The default, out-of-the-box Progress.
Recommended for+14
- ✓Upload progress
- ✓Multi-step form progress
- ✓Long-running tasks
- ✓Disk / quota usage
- ✓Pipeline / funnel summaries
Tags+6
progressloadingbarmulti-segmentcircularsteppeddefault
Features+4
- 0..100 value
- Indeterminate mode
- Accessible labelling
- Linear + circular variants
- Multi-segment bar
- Step indicator (1/5, 2/5, …)
- Striped fill
- Tones × sizes
Not recommended for−2
- ✕Inline loaders (use Skeleton or a spinner)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
value0..100 progress value
—segmentsMulti-segment values
—stepsStepped indicator total
—circularCircular variant
—stripedStriped fill
—indeterminateIndeterminate animation
—