Progress

Determinate or indeterminate progress, without made-up percentages.

Storage used

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add progress

What add progress installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

Storage used

ProgressLabel names the bar; ProgressValue formats the percentage.

report.pdf

The value advances in steps and completion is announced with role="status".

Preparing export…

value={null} while the duration is unknown; no percentage is shown.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`value` Current progress; null means indeterminate.	`number \| null`	—
`min / max` Range of value.	`number`	`0 / 100`
`format / locale` How ProgressValue formats and announces the value; locale defaults to en-US so SSR and the client agree.	`Intl.NumberFormatOptions / string`	`percent / "en-US"`
`getAriaValueText` Custom spoken text, e.g. "3 of 5 files".	`(formatted, value) => string`	—
`ProgressLabel / ProgressValue` Names the progressbar and shows the formatted value.	`span`	—

The states that apply to this component and their visual treatment.

State	Treatment
Progressing	Primary bar grows with a short width transition.
Complete	Full bar; data-complete is set.
Indeterminate	Full bar pulsing; no value shown.
Reduced motion	No transition and no pulse.

The root is a progressbar with aria-valuenow, min and max; ProgressLabel gives it its accessible name.

Use value={null} when the duration is unknown: it becomes indeterminate instead of inventing a percentage.

Updates are not announced on every tick; announce completion yourself (e.g. a toast or role="status" text).

The width change and the indeterminate pulse stop with prefers-reduced-motion.