ComponentsFeedback

Progress

How far along a task is, or a sliding bar while it's unknown.

Playground

<Progress value={60} aria-label="Upload" />

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i @junco/react @junco/tailwind

import { Progress } from "@junco/react";

<Progress value={done} max={total} aria-label="Sync progress" />

Point aria-labelledby at the label, and use getValueLabel so screen readers hear the same count you show.

Syncing courses3 of 12

Leave out value while you can't measure progress yet. The bar slides instead.

value: From 0 to max. Leave it out while the amount is unknown.; number | null
max: The value that means done.; number; Default: 100
getValueLabel: What screen readers say. Defaults to the percentage, e.g. "60%".; (value, max) => string
size: Bar height.; "sm" | "md" | "lg"; Default: "md"
color: Fill color.; "primary" | "success" | "warning" | "danger"; Default: "primary"
classNames: Slot overrides.; { root?: string; indicator?: string }

Prop	Type	Default
`value` From 0 to max. Leave it out while the amount is unknown.	`number \| null`	`–`
`max` The value that means done.	`number`	`100`
`getValueLabel` What screen readers say. Defaults to the percentage, e.g. "60%".	`(value, max) => string`	`–`
`size` Bar height.	`"sm" \| "md" \| "lg"`	`"md"`
`color` Fill color.	`"primary" \| "success" \| "warning" \| "danger"`	`"primary"`
`classNames` Slot overrides.	`{ root?: string; indicator?: string }`	`–`

Renders role=progressbar with aria-valuenow, aria-valuemax and a readable aria-valuetext.
Needs a name: aria-label, or aria-labelledby pointing at visible text.
data-state is loading, complete or indeterminate, for styling.
The fill animates with the motion setting; the indeterminate slide keeps moving (slower) with motion off, since it carries meaning.