Progress
Bar and ring shapes with sizes, variants, and concentric multi-ring activity rings.
Progress
Sizes
sm
md
lg
Variants
Completion levels
Real-world usage
Add 2 more details to complete your profile.
Ring shape — sizes
Pass shape="ring" to render the same progress value as a circular arc. size maps to pixel diameters (32 / 48 / 64); override with ringSize for an exact pixel value.
Ring shape — variants
Variants behave identically across both shapes — the bar's bg-{variant} indicator becomes the ring's stroke-{variant} arc.
Concentric rings — multiple progresses
Use ActivityRings for 2–4 simultaneous progress values on a single Apple-style concentric SVG. The outer ring is the most prominent metric; rings are passed outside-in. For one value, stay on <Progress shape="ring">.
- Modules — 86%
- Attendance — 60%
- Assignments — 40%