Progress

A progress bar built on Base UI’s Progress primitive. Supports determinate values and an indeterminate loading state.

Import

import { Progress } from "chunks-ui";

Basic Usage

Pass value and max to show a determinate progress bar:

<Progress.Root value={65} max={100} aria-label="Upload progress">
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

Indeterminate

Pass value={null} to activate the indeterminate pulse animation:

<Progress.Root value={null} aria-label="Loading">
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

To replace the pulse, add a data-indeterminate:animate-* class to the indicator, such as data-indeterminate:animate-none. An animate-* class without the data-indeterminate: prefix does not replace it.

Reduced motion

With prefers-reduced-motion: reduce, the indeterminate pulse keeps running. It is an essential status indicator, like the Loader spinner: without it, an indeterminate bar is a static block that gives no sign of activity. To stop the pulse with reduced motion, add data-indeterminate:motion-reduce:animate-none to the indicator. The determinate bar does not transition its width, so it jumps to each new value.

Animated

Use state and an interval to animate progress. This example includes play, pause, and reset controls:

Multiple Values

Compound Parts

Props

All parts accept the props from their corresponding Base UI Progress sub-components.