# Progress Ring

Circular progress ring with a bright bead on its leading edge. Reaching 100% brightens the ring and briefly turns any centre figure into a check; an indeterminate mode laps the track.

> Primitive · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add progress-ring
```

## Import

```tsx
import { ProgressRing } from "@/components/ui/progress-ring/progress-ring";
```

## Variants

- `indeterminate` — Indeterminate: `npx @lumioui/cli add progress-ring-indeterminate`
- `labeled` — Labeled: `npx @lumioui/cli add progress-ring-labeled`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | 0–100. Ignored while `indeterminate` is set. |
| `size?` | `number` | Square size in px. Default 96. |
| `strokeWidth?` | `number` | Ring stroke width in px. Default 8. |
| `color?` | `keyof ColorTokens` | Theme color token for the arc. Default "primary". |
| `indeterminate?` | `boolean` | Unknown progress — renders a lapping comet instead of the fill. |
| `active?` | `boolean` | Run the indeterminate lap. false pauses the loop (off-screen, idle). Default true. |
| `label?` | `string` | Accessible label. Default "Progress, N%" (or "Loading" when indeterminate). |
| `celebrate?` | `boolean` | Play the close moment (light, check, hold) when the value reaches 100. Default true. |
| `closedLabel?` | `string | null` | Caption under the centre figure once closed. null hides it. Default "Closed". |
| `haptics?` | `boolean` | Success haptic when the ring closes. Default true. |
| `onClosed?` | `() => void` | Fires after the close has held — resolve captions and actions here. |
| `children?` | `React.ReactNode` | Center slot — label, icon, or any content rendered inside the ring. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/progress-ring