Component
Progress ring
A circular progress indicator with a determinate arc-fill animation or an indeterminate spin, and an optional center slot for a label, so the ring can carry its own readout.
The primitive
progress ring.tsx
<NativeProgressRing value={62} size={44} strokeWidth={4} />Example
Sized up with a center label, the shape used for a payment's remaining time window where a countdown needs to read at a glance.
12m
progress-ring-example.tsx
<NativeProgressRing value={percentRemaining} size={56} strokeWidth={5}>
<span className="text-sm font-semibold tabular-nums">{minutesLeft}m</span>
</NativeProgressRing>Capabilities
| Prop | Type | Description |
|---|---|---|
| value | number | 0–100 |
| indeterminate | boolean | — |
| size | number | — |
| strokeWidth | number | — |
| color | string | — |
| trackColor | string | — |
| children | React.ReactNode | — |
| className | string | — |