FX · Feedback

A progress bar with a moving sheen, determinate or indeterminate.

Installing dependencies
Waiting for server
bash
npx shadcn@latest add https://www.rad-ui.com/r/progress-bar.json
React
import ProgressBar from "@/components/fx/progress-bar"

<ProgressBar value={progress} label="Installing dependencies" />
<ProgressBar label="Waiting for server" />  {/* indeterminate */}
  • role="progressbar" labelled by its visible label, with aria-valuenow (omitted while indeterminate).
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) drops the sheen; an indeterminate bar pulses in place instead of sliding.
PropTypeDefaultDescription
value
number
—

0–100; omit for indeterminate.

label
string
—

Accessible name.

showLabel
boolean
true

Show label and percentage.

color
string
'#a78bfa'

Bar colour.

Edit this page on GitHub →