ProgressRing Widget
The 84%-style ring the reference dashboards lean on. Hand-written SVG with no charting dependency — it has no axis and no scale, which is exactly what separates a Widget from a Chart here.
Usage
84%
91%
38%
12%
<ProgressRing value={84} label="Task progress" hue="violet" />Custom centre
Anything can sit in the middle. Keep it short — the ring is small and the label is what carries meaning for a screen reader anyway.
7/12
modules
<ProgressRing value={7} max={12} label="Modules completed" size={112}><span>7<small>/12</small></span></ProgressRing>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | number | — | Clamped into range; NaN and negatives render as empty rather than as a broken arc. |
| max | number | 100 | A zero max is survived rather than divided by. |
| size | number | 96 | Outer diameter in pixels. |
| thickness | number | 10 | Stroke width. The radius insets by half of it, so the ring is never clipped. |
| tone / hue | Tone | DecorHue | tone='brand' | Semantic or decorative colour. |
| label | string | — | Required. Becomes "Task progress: 84%" for assistive technology. |
Do
Give a label that says what is being measured — the percentage alone is meaningless read aloud.
Don't
Use a ring for a value with no maximum; that is a number, not a proportion.
Motion
The arc sweeps from empty to its value over --cb-duration-deliberate. Under reduced motion it is
drawn at its final length instead — the information arrives either way.