docs / core / progress

Progress

a bar that fills to show how far along something is, or shimmers when the end is unknown. it renders no text, so it always needs a label.

intensity · recedesrsc · server

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

uploads, installs, quota rows inside Card or a table cellpair with a text line that says what is progressingnot a meter for static values. it implies something is underwaynot a page loader. indeterminate work that owns the view gets Spinner

a11y

role="progressbar" with aria-valuenow/min/max, valuenow omitted when indeterminate · bring an aria-label · motion stops under reduced motionjest-axe

dependencies

class-variance-authority
live demo · try it out
customize
value0 to 100; ignored when indeterminate
55
sizetrack height
glowaccent halo on the fill
indeterminatedrop the value for the shimmer
usagecopy
import { Progress } from "@usva-ui/react/primitives/progress";

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

props

proptypedefaultnotes
valuenumber—current progress, clamped to [0, max]. omit it for the indeterminate shimmer.
maxnumber100upper bound for value.
size"sm" | "md" | "lg""md"track height, 4 to 12 pixels. pick by the density of the row it sits in.
glowbooleanfalsethe accent halo on the fill. one glowing bar per view.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Progress } from "@usva-ui/react/primitives/progress";

<Progress value={40} aria-label="Upload" />
<Progress value={80} glow aria-label="Sync" />
<Progress aria-label="Working" />