Progress Ring
ProA circular progress indicator that displays completion as a ring stroke. The ring fills clockwise from the top as the value increases. Used for compact progress displays within cards, dashboards, and profile completion meters. Supports an optional centre label showing the percentage or a custom value.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Small | Compact ring without a centre label for inline use. | Use within table cells, list items, or tight layouts where space is limited. |
| Medium | ||
| Large | Larger ring with a prominent centre label for hero metrics. | Use as a focal point in dashboard cards or summary sections. |
Usage Guidelines
Include role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax.
Use for time-based loading — use Spinner instead.
Display the percentage or metric value in the centre label for sighted users.
Animate the ring counter-clockwise — it conflicts with reading direction conventions.
Use a smooth CSS transition on the stroke-dashoffset for visual continuity.
Show a ring at 0% without context — it looks like an empty circle.
Provide an accessible name describing what the ring measures.
Code
Design Tokens
Accessibility
- Requires role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax.
- Provide aria-label describing the metric — "Profile completion" not just "Progress".
- The SVG ring is decorative from an accessibility standpoint — the ARIA attributes convey the value.
- Update aria-valuenow when the value changes dynamically.