Components
Loader
Shows that something is loading: a spinner when the time is unknown, a bar when progress is known, or the brand mark.
Playground
Figma variant
🎛 Type=Infinitive
Style=PrimaryVariants
Infinite spins the refresh icon in a tone circle. Finite fills a bar, optionally with the percentage and the amount under it. Brand turns the Ladom keycap.
54%45 Mb/ 98 Mb
Tokens
| Part | Size | Color |
|---|---|---|
| Infinite circle | 24px (--space-xlarge) | --color-{tone} (secondary: --color-secondary-soft) |
| Infinite icon | 16px | --color-on-{tone} |
| Finite track | --loader-track-height | --color-{tone}-soft |
| Finite fill | --loader-track-height | --color-{tone} |
| Value text | ui/text small/regular | --color-foreground-medium-emphasis |
| Amount | ui/footnote/regular | --color-foreground-high-emphasis / --color-foreground-medium-emphasis |
| Brand | 24px | --color-static-brand-color |
Motion
Infinite turns once per second, linearly. Brand follows the Figma steps T0–T8 (0°, 15°, 30°, 60°, 90°, 105°, 135°, 165°, 180°) in one second, then repeats them for the second half turn. Both stop when the user asks for reduced motion.
Notes from Figma
- Figma has no duration or easing for the spin; code uses 1s per turn, like the Button loader.
- Finitive exists only in Primary; code applies every tone (tone-soft track, tone fill).
- The Finitive bar is 5px tall, a raw value; code adds --loader-track-height. Its track and fill radii (8px and 4px) both read as round on a 5px bar.
- The Brand variant has a primary refresh vector under the keycap that is fully covered; code draws only the keycap.
- The Secondary spinner uses secondary-soft as its circle, unlike the other tones.
Figma to code
| Figma | React |
|---|---|
| 🎛 Type = Infinitive | variant='infinite' (default) |
| 🎛 Type = Finitive | variant='finite' value={…} |
| 🎛 Type = Finitive with Text | variant='finite' value={…} valueText loaded total |
| 🎛 Type = Brand | variant='brand' |
| Style = Primary / … / Danger / Warning / Information | tone='primary' / … / 'error' / 'warning' / 'info' |