Spin · ProgressBar Atom
Both are server-safe: a CSS animation and a width, no state.
Usage
35%
<Spin label="Loading invoices" />
<ProgressBar value={35} label="Upload progress" showValue /><ProgressBar label="Syncing" /> {/* no value — indeterminate */}Determinate or not
A ProgressBar without a value is indeterminate — "something is happening, duration unknown".
With a value it exposes aria-valuenow, so the percentage is announced rather than merely drawn.
Under reduced motion the spinner stops turning and the indeterminate bar stops sliding: an animation that loops forever is exactly what that preference is about. Both stay visible, because removing the feedback entirely would be worse than the movement.
Do
Prefer a Skeleton over a Spin when you know the shape of what is loading.
Don't
Show a bare spinner with no label or nearby text; on its own it announces nothing.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| Spin label | string | — | Makes it a status region. Omit only when nearby text already says what is loading. |
| Spin size / tone | 'sm' | 'md' | 'lg' | Tone | — | Token sizes and semantic colour. |
| ProgressBar value / max | number | — | Omit value for indeterminate. |
| ProgressBar label | string | — | Required accessible name. |
| ProgressBar showValue | boolean | — | Prints the percentage after the track. |