Progress bar
Linear progress indicator for known and unknown durations. Aligned with J&J DS v1.2 (Figma 13647:53047). For circular spinners use <Spinner />.
Sizes
Two heights: small (4px) and medium (6px, default).
Show sourceHide source
<ProgressBar size="sm" value={24} />
<ProgressBar size="md" value={24} />Value milestones
1%, 24%, 100% — each rendered without a label. Width animates when `value` changes.
Show sourceHide source
<ProgressBar value={1} />
<ProgressBar value={24} />
<ProgressBar value={100} />Label + value readout
Pass a label node and `showValue` for a header row above the bar. Use labelPosition='end' to put it below instead.
Show sourceHide source
<ProgressBar value={25} label="Scanning for changes…" showValue />
<ProgressBar value={100} label="Scanning for changes…" showValue />
<ProgressBar value={25} label="Files" showValue valueFormat="ratio" max={50} />Label below the bar
labelPosition='end' reverses the stacking order — useful under an icon button or inside a file-upload row.
Show sourceHide source
<ProgressBar value={64} label="Uploading report.pdf" showValue labelPosition="end" />Indeterminate
When the exact progress is unknown, pass `indeterminate` for a shimmering loop. The bar exposes aria-busy and omits aria-valuenow.
Show sourceHide source
<ProgressBar indeterminate label="Loading" />Live demo
Click Run to animate from 0→100% over ~3s.
Show sourceHide source
const [value, setValue] = useState(24);
useEffect(() => { /* animate */ }, [...]);
<ProgressBar value={value} label="Import" showValue />vs. Spinner (circular)
Spinner is the companion circular indicator. Use ProgressBar when the task has known linear progress; Spinner when it's atomic and indeterminate.
Show sourceHide source
<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />