Progress indicators fill a linear track or a circular ring toward a known maximum, reporting how far a measured operation or metric has advanced.
Progress indicators fill a linear track or a circular ring toward a known maximum, reporting how far a measured operation or metric has advanced.
Change the props and copy the result. The component select switches between the bar and the two gauges; value picks from fixed steps and is emitted as the number the prop requires.
The bar takes its width from its container
ProgressBar is w-full, so this demo wraps it in a 256px container with vertical padding for the floating labels. The copied snippet carries the component only; give it a bounded parent in your own layout.Five components from three modules: one linear bar with its bare track, two SVG gauges sharing a size scale, and a standalone simple circle.
| Component | Description | Import from |
|---|---|---|
| ProgressBar | The linear bar: an 8px track with the value rendered to the right, below, or in a floating tooltip. | @/components/base/progress-indicators/progress-indicators |
| ProgressBarBase | The bare track and fill with no text; what ProgressBar renders when labelPosition is omitted. | @/components/base/progress-indicators/progress-indicators |
| ProgressBarCircle | The circular gauge: the value inside the ring, in 5 sizes, with an optional label. | @/components/base/progress-indicators/progress-circles |
| ProgressBarHalfCircle | The half-circle gauge: the same sizes and props in roughly half the height, for tighter dashboard slots. The height is the radius plus the stroke, so each size measures about 55% of its full ring. | @/components/base/progress-indicators/progress-circles |
| CircleProgressBar | A standalone fixed 64px ring with a hardcoded 0 to 100 range; not on the Figma design. | @/components/base/progress-indicators/simple-circle |
The 5 forms of the linear bar at value 65, mirroring the Figma sheet’s Label axis: the bare track, then the value to the right, below, or floating in a tooltip above or below the fill. The floating tooltip is absolutely positioned and adds no layout height, which is why those rows carry extra padding here.
The value text sits outside the progressbar element
role="progressbar", so assistive tech hears them as unrelated static text. Details are on the Code tab under Accessibility.Both gauges at all 5 sizes, value 65. Rings run 64, 160, 200, 240, and 280px in diameter with strokes from 6 to 28px, and the value climbs the display type scale with the size; the half circles share that geometry at roughly 55% of the height, since their height is the radius plus the stroke. All values match the Figma sheet.
The label lives inside the ring, except at xxs
CircleProgressBar is a standalone fixed 64px ring from its own module: no size axis, no label, and min and max are literal-typed to 0 and 100, so only the default range typechecks. It overlaps the xxs gauge and has no counterpart on the Figma sheet.
No interaction states exist anywhere in the family: nothing hovers, focuses, or disables. The states are the values, so the ends of the range are what deserve a look.
At 0 the kit hides the fill entirely