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.
Standalone
progress ring.tsx
<NativeProgressRing value={62} size={44} strokeWidth={4} />Example
Sized up with a center label, the shape used for a timed countdown where the remaining window 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 | - |