# ASCII Spinner

> Terminal loading spinners: braille, line, arc, quadrant and more.

Category: Interface. Docs: https://asciicn.sumak.dev/docs/ascii-spinner

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-spinner
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiSpinner } from "@/components/ascii/ascii-spinner"

<AsciiSpinner />
<AsciiSpinner variant="arc" label="Saving" />
```

## Examples

### Every spinner

Each variant has its own frame rate, tuned so it reads as motion rather than flicker.

```tsx
{Object.keys(spinners).map((v) => (
  <AsciiSpinner key={v} variant={v} />
))}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"braille" | "line" | "arc" | "quadrant" | "bounce" | "pulse" | "grow"` | `"braille"` | Frame set. |
| `label` | `string` | `"Loading"` | Announced via role=status. |

## Notes

- **Accessibility.** `role="status"` with an `sr-only` label, so screen readers announce "Loading" once instead of every frame.
- **Motion.** Holds its first frame under `prefers-reduced-motion`.
- **Layout.** One character wide. Give it `w-[2ch]` next to text so wide glyphs don't nudge the line.