Feedback
Progress
Two shapes for one fact. ProgressBar is a hairline that eases toward its value, for progress reported next to the thing it belongs to. Radial draws its ring along its own circumference around a focal number, for progress that is the point of the view. Both ease between values instead of jumping, so a ten percent step reads as movement rather than a repaint.
npx shadcn@latest add @minflow/progressWhere to use it
- Uploads, imports, migrations, anything with a real denominator.
- Radial when the figure is the headline, bar when progress is an aside inside a row or a form.
- Never for work with no known end; that is a spinner, and a fake bar is worse than an honest spin.
Variations
Bar
The default. A hairline that sits under or beside the thing it measures and takes no more height than a rule.
Radial
When the percentage is the content rather than an aside. The number sits inside the ring, so one glance gives both the figure and the shape of it.
Advancing value
Whenever the value arrives in steps. Push it and watch the bar ease and the ring draw; both shapes read the same change, so pairing them on one surface is safe.
Radial sizes
When the radial has to fit a dense metric row or carry a dashboard on its own. The ring scales, the number stays at one size so figures across a row stay comparable.