# Spinner

Small indeterminate loading indicator. Stroke is `currentColor` so it inherits the surrounding text color (slot inside a destructive button → destructive-on-foreground spinner). Declares `role="status"` and an `aria-label` so assistive tech announces the pending state.

[View examples](https://marsam.rahhal.app/components/spinner) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/spinner`

**Category:** `feedback`

## Sizes

| size | diameter |
| --- | --- |
| sm | 0.75rem / 12px (inline with body text) |
| md (default) | 1rem / 16px (matches `h-4 w-4` Lucide icons) |
| lg | 1.5rem / 24px (page-level wait blocks) |

## Props

| prop | type | purpose |
| --- | --- | --- |
| size | sm | md | lg | visual size; default md |
| label | string | accessible label announced to AT; default "Loading" |
| className | string | merged into the SVG class list (e.g. `me-2` to space inside a button) |

## When to use what

- **Spinner** — indeterminate, short wait, shape of result unknown (button busy state, "checking…", inline retry).
- **Skeleton** — known content shape; users perceive a faster paint when the placeholder mimics the eventual UI.
- **Progress** — determinate progress with a known percentage (file upload, multi-stage import where stages are countable).