Feedback

Progress

A determinate or indeterminate bar for work that takes time.

BetaNew shared patternRegistry JSON

Uploading brand-assets.zip

42 MB of 148 MB · Do not close this tab

Upload progress18%

Importing records

Import progress

The total is not known until the file is parsed.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add progress

Writes components/ui/progress.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { Progress } from "@/components/ui/progress";

Props and composition points for Progress. Native element props pass through.

Prop	Type	Default	Description
`value`	`number \| null`	null	Completed amount. Pass null when the total is unknown; the bar renders indeterminate and no value is announced.
`max`	`number`	100	Upper bound of the value range.
`label`	`string`	None	Accessible name and visible caption. Required unless you pass aria-label on the root.
`showValue`	`boolean`	false	Shows the rounded percentage beside the label.
`indicatorClassName`	`string`	None	Colour override for a semantic result, used sparingly.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Renders role progressbar with aria-valuenow, aria-valuemin, and aria-valuemax.
The bar needs a name. Use a visible label when the work has a subject, and aria-label when the layout cannot fit one.
Indeterminate work announces no number. Add a status message when the job starts and when it finishes.
The fill uses a transform transition and is disabled under prefers-reduced-motion.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.