‹ components

Progress

draftv0.9.0·open in canvas

Progress bar on Radix Progress — determinate (0–100) or indeterminate shimmer.

Installnpx shadcn add @cids/progress
Live demo

Determinate — value 15%

Indeterminate — unknown duration

Motion · tap to replay

honors reduced-motion

Determinate width eases 300ms per update (values arrive in steps; the ease smooths them). Indeterminate is the system's one sanctioned looping animation — 1.2s slide, settle curve, quiet by design. Both neutralized by `prefers-reduced-motion`.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Progress } from "@/design-system";

<Progress aria-label="Upload progress" value={64} />
<Progress aria-label="Syncing" />  {/* no value → indeterminate */}

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

**Indeterminate**: no `value` — shimmer loop`aria-valuenow` absent(announced as busynot a percentage).Toastnot a red bar.

Progress bar on Radix Progress — determinate (0–100) or indeterminate shimmer.

Anatomy

━━━━━━━━━━━━░░░░░░░░  ← track: surface-bright, h-1.5, pill
└─ indicator: brand fill, width = value%
   (indeterminate: ⅓-width segment sliding on loop)

Props

PropTypeDefaultNotes
valuenumber—0–100, clamped. Omit for indeterminate.
aria-labelstring—Required — names the bar for screen readers.
classNamestring—cn-merged onto the track (e.g. h-2, width).

Motion

Determinate width eases 300ms per update (values arrive in steps; the

ease smooths them). Indeterminate is the system's one sanctioned

looping animation — 1.2s slide, settle curve, quiet by design. Both

neutralized by prefers-reduced-motion.

A11y

Radix renders role="progressbar" with aria-valuemin/max/now wired

(aria-valuenow omitted when indeterminate). aria-label is a required

prop — an unnamed progress bar announces as "progress bar, 64%" of

nothing. Never convey completion by color alone; pair with text

("64%" or "Uploading…") when the number matters.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.