Progress Indicator
Visual feedback for task completion. Includes a horizontal bar in five label-placement variants and a circular ring in full and half-arc styles across five sizes.
Linear — simple
Bar only, no label. Use size to control track height:sm (8 px, default) or md (12 px).
Linear — label right
Percentage label displayed inline to the right of the track.
Linear — label below
Label stacked below the bar, right-aligned.
Linear — tooltip above
Floating tooltip that tracks the fill endpoint, arrow pointing down.
Linear — tooltip below
Floating tooltip below the bar, arrow pointing up.
Circular — full ring sizes
Five sizes: xs, sm, md, lg, xl.
Circular — full ring with label
Pass a label prop to show supplementary text above the percentage. The xs size omits the label automatically.
Circular — half arc sizes
The half variant shows a 180° top arc.
Circular — half arc with label
Circular — no centre text
Set showValue={false} to render the ring without any centre text.
Linear — custom label text
Override the auto-generated percentage string with any custom text via the label prop.