Docs draft
Spinner
Component storyFigma component set ↗React component ↗DSDS entity ↗
When to use it
useIndeterminate waits under a few seconds: a panel fetching, a button submitting.
avoidLong or determinate operations. A spinner that runs for ten seconds reads as a hang.
loading-bar Planned.Variants
size · sm / md / lg — 24 / 48 / 64, snapped to the space scale from the old set's 24/48/60. Button composes sm scaled to its icon slot.
Design specifications
| size-sm | space.24 |
| size-md | space.48 |
| size-lg | space.64 |
| color | currentColor — inherits the surface's text role; Figma binds color.text.primary and surfaces override |
| motion | 800ms linear rotation, 270-degree arc |
Accessibility
role=status with an accessible label (default: Loading). Not focusable; announced, not operated. Respect prefers-reduced-motion at the app level before shipping stable.