# Spinner

Says something is happening when the wait is short or unknown. Four kinds at five sizes.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/spinner
```

## Usage

```tsx
import { Spinner } from '@/components/fetaui/spinner'

export function Example() {
  return <Spinner label="Saving" delay={300} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| kind | arc, bars, dots, orbit | arc |
| size | xs, s, m, l, xl or pixels | m |
| label | string or null | Loading |
| delay | number | 0 |
| animated | boolean | true |

## When to use

- After 300 ms, when the length of the wait is unknown.
- Where the result will appear: in the button, the field or the row.

## When not to use

- When you know the length: use Progress.
- For a whole blocked panel: use Loader.

## Accessibility

- Role status with a hidden label such as Saving.
- Pass `label={null}` when text beside it says the same.
- Set aria-busy on the region that is loading.

## Motion

- Linear, steady turns: arc 0.8 s, bars 1 s in 45° steps, orbit 1.4 s.
- Dots breathe over 1.2 s, 200 ms apart.
- Loops pause offscreen.
- With reduced motion, spin becomes a slow 1.6 s pulse.