# Spinner

> Indeterminate progress glyph.

- **Level**: atom · **Status**: stable · **Role**: status
- **Import**: `import { Spinner } from "@rrios-forge/ui/atoms/spinner";`
- **Source**: `packages/ui/src/atoms/spinner`

In-flight feedback. Eight spokes stepping round (Apple's activity indicator); under reduced motion they stay put and pulse in opacity. A neutral grey by default — a loader is not an action, so it never wears the accent. When not decorative it is a `role="status"` live region whose `label` is rendered inside it as visually hidden text (live regions announce content, not `aria-label`); pass `decorative` when a parent already announces the in-flight state (e.g. `<Button loading>`), and `tone="inherit"` to take the parent's colour.

## Use it for

- Inline spinner → `Spinner`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `tone` | — | `neutral` `muted` `inverse` `danger` | `neutral` | Which semantic colour family the element speaks in. |

## Stories

- [Playground](/?path=/story/components-atoms-spinner--playground) · frame: `/iframe.html?id=components-atoms-spinner--playground&viewMode=story`
- [Sizes](/?path=/story/components-atoms-spinner--sizes) · frame: `/iframe.html?id=components-atoms-spinner--sizes&viewMode=story`
- [Tones](/?path=/story/components-atoms-spinner--tones) · frame: `/iframe.html?id=components-atoms-spinner--tones&viewMode=story`
- [Inline with text](/?path=/story/components-atoms-spinner--inline-with-text) · frame: `/iframe.html?id=components-atoms-spinner--inline-with-text&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).