For the moments honesty requires a wait.
| Prop | Type | Notes |
|---|---|---|
| variant | spinner · dots | Ring, or three bouncing dots |
| size | S · M · L | 16 / 22 / 34px (spinner) |
| label | string | Trailing text; also the accessible name |
| role | status | Announced politely to assistive tech |
| reduced-motion | — | Slows the animation right down |
Use a Loader for an indeterminate wait. When you know how far along it is, show Progress; when the shape of the result is known, prefer a Skeleton.
Say what is loading. A labelled spinner reassures.
Don't scatter spinners across a page. One wait, one loader.
Put the loader inside the action that's working, and disable it.
Don't block a whole screen for a tiny fetch. Prefer a Skeleton.
Inline in a button during an async submit.
Centered in a panel while its content loads.
Dots for a chat "typing" or streaming response.
| Token | Value | Role |
|---|---|---|
| --ldr-size | 16 / 22 / 34px | Spinner diameters |
| --ldr-track | #2A2A30 | Ring track |
| --ldr-arc | #FF7A00 | Rotating warm arc |
| --ldr-speed | 0.7s linear | Rotation period |
| --ldr-label | #9AA0A8 | Trailing label |
| --ldr-reduced | 2s | Slowed period under reduced-motion |
<span class="o-loader" role="status" aria-label="Loading"></span> <span class="o-loader-row" role="status"> <span class="o-loader"></span> Loading your workspace… </span> <span class="o-loader-dots" role="status"><span></span><span></span><span></span></span>