# Spinner

Shows that a process is running. Seven sizes, primary, neutral and on-colour.

<Preview name="spinner-sizes" title="Sizes and styles" />

## Installation

<ComponentInstall name="spinner" />

## Usage

```tsx title="page.tsx"
import { Spinner } from "@/components/ui/spinner";

<Spinner label="Loading" />
```

## Anatomy

- **Root**: a `role="status"` element with the animated ring.
- **Label**: visually hidden text announced to screen readers.

## Examples

### Sizes and colours

Seven sizes from `2xs` (20px) to `2xl` (44px), in `primary`, `neutral`, `on-color` and `current` (follows the text colour, for use inside buttons).

### Decorative

Pass `label={null}` when the surrounding element already announces the busy state, as [Button](/en/docs/components/button) does.

## RTL

A ring has no direction, so nothing mirrors. Translate the `label` for Arabic pages.

<DirectionCompare name="spinner-sizes" title="Spinner" />

## Accessibility

- `role="status"` with a visually hidden label, so screen readers announce it once.
- With `label={null}` the spinner is hidden from screen readers.
- With reduced motion, the spinner turns slowly instead of stopping, so the busy state stays visible.

## API Reference

<ApiReference component="spinner" />

## Deviations from DGA

<ComponentDeviations component="spinner" />

## Contrast

<ComponentContrast component="spinner" />


---

[Index of every page](https://dga.omqkhafi.dev/en/llms.txt)