# Loader

> Animated waiting indicator.

Source: https://ui.jcsoftdev.com/docs/components/loader

Animated waiting indicator. With reduced motion the dots stay still.

## Import

```ts
import { Loader } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/loader`.

## Usage

```tsx
<Loader variant="dots" size="md" label="Escribiendo…" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"dots" \| "typing"` | `"dots"` | `dots` is the bare indicator; `typing` wraps it in a bubble with a label. |
| `size` | `"sm" \| "md"` | `"md"` |  |
| `label` | `string` | `"Escribiendo…"` | Spoken label (`role="status"`); shown as text in the `typing` variant. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/ai-loader--default)
- [Typing](/storybook/?path=/story/ai-loader--typing)
- [Narrow](/storybook/?path=/story/ai-loader--narrow)
- [Preset Brutal](/storybook/?path=/story/ai-loader--preset-brutal)

## Source

`packages/ui/src/ai/loader/loader.tsx`