Progress
Show how far along a task is.
Progress as a bar, segmented steps, a row of tall bars or a ring, with tones, sizes, per-bar colors, an indeterminate state and a spring that eases to each new value.
radix-ui · motion
Default
The fill springs to each new value.
With Label
A label and value above the bar.
Segmented
variant="segmented" for steps, filled one by one.
Bars
variant="bars": a row of tall pills that fill from the left.
Uptime
barTones colors single bars, for a status history.
Ring
variant="ring" with showValue for the percentage.
Indeterminate
value={null} when the total isn't known.
Tones
neutral, blue, emerald, amber and rose.
Size
sm, md (default) and lg.
