# Progress bars

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

Use `ProgressBar` to communicate determinate progress, such as a multi-step form or
an upload whose completion percentage is known. It animates the value; your
application supplies the progress and decides when the task is complete.

```tsx
import { ProgressBar } from "@ovok/native/progress-bar";

<ProgressBar progress={completedSteps / totalSteps} />
```

Pass a normalized value from `0` to `1`; the component multiplies it by 100 to set
the fill width. You can also pass a Reanimated `SharedValue<number>`. For work with
no measurable completion, show an indeterminate loading
state instead of presenting a misleading percentage. Provide accompanying text or
accessibility semantics in the screen so the value is available without relying on
color or animation alone.

## References [#references]

- [ProgressBar props](/native-sdk/guide/components/progress-bar/)
- [Reusable UI flows](/native-sdk/guide/how-to/reusable-flows)

## API reference [#api-reference]

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