# Spinner

> Something is happening: a ring with one sweeping arc, three rising dots, or eight petals fading round, in currentColor.

Spinners are small but everywhere, and most are a border with a gap that wobbles. These are drawn: a hairline ring with one arc, three dots that rise in turn, and a clock-face of petals. They take the text colour, announce "Loading" to screen readers, and calm down under reduced motion.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/spinner.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): none
- Docs and live preview: https://hairlineui.com/ui/spinner
- Registry item (source): https://hairlineui.com/r/spinner.json

## Usage

```tsx
import { Spinner } from "@/components/ui/spinner";

<Spinner />
<Spinner variant="dots" size="md" label="Writing a reply" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"ring" \| "dots" \| "bars"` | `"ring"` | Drawing. |
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"sm"` | 12, 16, 20 or 28px. |
| `label` | `string` | `"Loading"` | For screen readers. |

## States

- **ring**: One arc sweeps round every 800ms.
- **dots**: Each dot rises in turn, 140ms apart.
- **bars**: Petals fade round a clock face (800ms).

## What it handles

A spinner with no label is silent to a screen reader; this one says what is loading.

- **Three drawings**: ring, dots and bars.
- **Sizes**: 12, 16, 20 and 28px.
- **currentColor**: Inherits the colour of what it sits in.
- **Announced**: role="status" with a label.

## Replaces

loading spinner, typing indicator

## Where it fits

- **Buttons and inputs**: A 12px ring inside a busy button.
- **Panels and cards**: A 20px ring while a section loads.
- **Chat and AI replies**: Three dots while something is typed.
- **Full screens**: A 28px ring in the middle of an empty page.

## Notes

- Reduced motion: the ring pulses slowly; dots and petals hold still.
- Use Progress when you know how far along it is.

License: MIT (https://hairlineui.com/license#components)