# Spinner

An indeterminate loading indicator, the same ring a loading Button draws.

```ehtml Example
import { Spinner } from "@elements/ui/spinner";

<Spinner />
<Spinner size="lg" label="Saving draft" />
<button class="button is-primary" disabled><Spinner size="sm" label="" /> Processing</button>
```

## Parts

| Part | What it is |
|---|---|
| `.spinner` | The ring. Usable without the template: `<span class="spinner is-sm" aria-hidden="true">``</span>`. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Diameter from the theme's icon tokens. |
| `label` | `string` | `"Loading"` | Accessible name for role=status. An empty label makes the spinner decorative (aria-hidden). |
| `class` | `string` | `""` | Extra classes; one that sets width and height sizes the spinner freely. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Any other attributes for the span: id, title, data-\*. |

## Slots

| Slot | Content |
|---|---|
| `default` | Optional. An icon to spin in place of the ring. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-size` | `"sm" \| "md" \| "lg"` | root |

## Accessibility

- role="status" with aria-label from label, so a screen reader announces what is loading.
- label="" removes the role and sets aria-hidden, for a spinner beside text that already says it, or inside an aria-busy container.
- Under prefers-reduced-motion the ring turns at a quarter of the speed.

## See also

- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Kbd](kbd): A keyboard key or shortcut, as text.
- [Separator](separator): A horizontal or vertical rule between content, semantic or decorative.