---
outline: deep
---

# Spinner

Spinners are used to indicate an indeterminate loading state. Commonly used inside buttons, forms, or content areas while waiting for an asynchronous operation to complete.

**`<l-spinner>`** — Custom Element · Shadow DOM

## Options

```html
<l-spinner class="text-4xl"></l-spinner>
```

### Sizes

Size scales with `font-size` since `--size` defaults to `1em`.

```html
<l-spinner class="text-base"></l-spinner>
<l-spinner class="text-2xl"></l-spinner>
<l-spinner class="text-4xl"></l-spinner>
<l-spinner class="text-6xl"></l-spinner>
```

### Custom colors

Override `--indicator-color`.

```html
<l-spinner class="text-4xl [--indicator-color:var(--color-blue-500)]"></l-spinner>
<l-spinner class="text-4xl [--indicator-color:var(--color-green-500)]"></l-spinner>
<l-spinner class="text-4xl [--indicator-color:var(--color-purple-500)]"></l-spinner>
```

## Accessibility

### Criteria

- **Role** — Uses `role="progressbar"` to communicate loading state
- **Accessible name** — Default `aria-label="Loading"` provides accessible name
- **Color** — Indicator color must meet non-text contrast ratio against its background

### Rules

- When the spinner indicates loading for a specific region, add `aria-busy="true"` to the container being loaded
- Provide a context-specific `aria-label` when multiple spinners are on the same page (e.g., `aria-label="Loading search results"`)

## API reference

### Importing

```js
import 'luxen-ui/spinner';
```

### CSS custom properties

- `--size` (default: `1em`) — The size of the spinner (width and height).
- `--indicator-color` — The color of the spinner.
- `--speed` — The duration of one full spin cycle.