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";

Pass value and max to show a determinate progress bar:


<Progress.Root value={65} max={100}>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

Upload progress65%

Omit value (or pass null) to activate the indeterminate pulse animation:


<Progress.Root>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

Loading…

Step 0.410%

Step 1.640%

Step 375%

Step 4100%

Part	Description
`Progress.Root`	State container. Holds `value`, `max`, and exposes `data-indeterminate` when no value is set.
`Progress.Track`	The background rail. Full-width pill shape.
`Progress.Indicator`	Fills the track proportionally. Pulses when indeterminate.

Prop	Type	Default	Description
`value`	`number \| null`	`null`	Current progress value. `null` triggers indeterminate state.
`max`	`number`	`100`	Maximum value
`aria-label`	`string`	—	Accessible label for the progress bar
`className`	`string`	—	Additional CSS classes