# Progress ring

Canonical page: https://docs.ovok.com/native-sdk/guide/modules/progress-ring

Use `ProgressRing` when a compact circular indicator fits a tile, card, or task summary. It accepts a progress fraction from `0` to `1`, can center app-owned content, and has a distinct unknown state for work whose completion cannot be measured.

```tsx
import { ProgressRing } from "@ovok/native/progress-ring";
import { Text } from "react-native";

<ProgressRing progress={0.65} accessibilityLabel="Daily goal" size={64}>
  <Text>65%</Text>
</ProgressRing>
```

`progress` is a fraction, so `0.65` means 65 percent. Finite values are clamped to the `0`–`1` range. When progress is unavailable, omit the prop or pass `null`; the ring renders a dashed indicator and exposes no current value to assistive technology.

## Keep the accessible value meaningful [#keep-the-accessible-value-meaningful]

Give each ring a localized `accessibilityLabel` that describes what is progressing. The component exposes progress-bar semantics by default. Passing `onPress` makes the root a button instead, so provide a clear button label and use that behavior only when pressing the ring performs an action.

If the center text communicates progress, keep it consistent with the `progress` fraction. For example, pass `0.65` for `65%`; do not pass a percentage value such as `65`.

## Style the indicator [#style-the-indicator]

Use `size` and `strokeWidth` to fit the surrounding layout. `color` controls the active arc and `trackColor` controls the background track; by default they use the app theme's primary and gray colors. `children` are positioned in the center, and `style` applies to the root pressable.

```tsx
<ProgressRing
  progress={0.4}
  size={56}
  strokeWidth={5}
  color="#176B5B"
  trackColor="#D8E4E1"
  accessibilityLabel="Upload progress"
>
  <Text>40%</Text>
</ProgressRing>
```

For a linear indicator, use [ProgressBar](/native-sdk/guide/components/progress-bar/). See the [ProgressRing component reference](/native-sdk/guide/components/progress-ring/) for the complete prop contract.

## API reference [#api-reference]

Every export of `@ovok/native/progress-ring`, with signatures, props and types, is in the [`progress-ring` API reference](/native-sdk/reference/progress-ring).