ProgressRing

Chart
A full-circle completion ring, the Gauge's sibling: a muted track ring, a tone-colored value arc revealed clockwise from 12 o'clock with rounded caps, the whole-percent readout centered inside, and an optional label below the graphic. The same 0-100 value contract, tone axis, and rounding rules as Gauge, in the circular anatomy that reads as "completion" rather than "level".
src/charts/progress-ring
View in Charts

Playground

Every control sets a real prop of ProgressRingProps. The JSX below updates as you go.
Props
value
number
64
label
string
Tone
pick one
compact
boolean
JSX · ProgressRingProps
<ProgressRing value={64} label="Synced" primary />

Variants

3 examples from src/charts/progress-ring/progress-ring.md, each rendered live from its own JSX.
Success tone
<ProgressRing value={92} success />
Warning tone
<ProgressRing value={81} warning />
Compact
<ProgressRing value={72} compact />

Anatomy

1
Track
2
Value arc
3
Value
4
Label
Dimmed parts appear only in some states or variants.

Props

10 props on ProgressRingProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
2 props
value *
number
–
The value to display, 0-100.
label
string
–
A short caption beneath the number (e.g. "Complete").
Tone of the value arc
pick one
4 props
primary
boolean
false
success
boolean
false
warning
boolean
false
destructive
boolean
false
Density
4 props
compact
boolean
false
stacked
boolean
false
Set the label under the ring, centred, instead of beside it (a row of rings, each named underneath).
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
For sizing/composition only.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
image
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<ProgressRing value={72} label="Complete" />

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ion
--sf4
--tx
--tx3

Related components