Skip to content
oks-ui

Progress component

Progress renders linear or circular progress, determinate or indeterminate, with an optional value label. CircularProgress is the ring variant.

Data Display9 propsAccessibility notes

Playground

Change a prop on the right and the preview updates. Switch to Code to copy what you see.

Recipes

Copy-paste patterns for the ways Progress actually gets used — each one a real, self-contained example.

Linear progress

A determinate bar from value against minValue/maxValue (default 0–100). showValueLabel prints the percentage.

<Progress value={64} label="Uploading…" showValueLabel />

Circular progress

CircularProgress is the ring variant — same value API, for a compact inline indicator.

<CircularProgress value={72} showValueLabel />

Indeterminate

Omit value for an indeterminate animation when you can't measure progress — a request in flight, say.

<Progress label="Working…" />

Semantic colors

color communicates the state of what's progressing — success as it completes, danger when it's over a limit.

<Progress value={92} color="success" aria-label="Success progress" />
<Progress value={98} color="danger" label="Storage" showValueLabel />

Example

progress.tsx
<Progress value={64} label="Uploading…" />

<CircularProgress value={64} />

<Progress isIndeterminate label="Working…" />

Props

The full public API for Progress. Every prop is stable and intentionally typed.

Data

value

number

default: —

Current value. Omit for an indeterminate bar.

minValue / maxValue

number

default: 0 / 100

Range.

Appearance

color

"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"

default: primary

Semantic colour of the indicator.

size

"sm" | "md" | "lg"

default: md

Bar / ring size.

radius

string

default: —

Progress only — track radius.

strokeWidth

number

default: 4

CircularProgress only — ring thickness.

Content

label

ReactNode

default: —

Text label (also becomes the aria-label when a string).

showValueLabel

boolean

default: false

Render the formatted value.

Behavior & states

formatValue

(value, maxValue) => ReactNode

default: percentage

Value-label formatter.

Accessibility

  • Exposes `role="progressbar"` with `aria-valuenow`/min/max; an indeterminate bar omits `aria-valuenow`.
  • The visible label is wired to the bar with `aria-label`/`aria-labelledby`.

More in Data Display