# Loader

A dozen animated busy indicators in a single web component — pick a style with one attribute.

<p class="kai-tag-sub">kai-loader</p>

An animated busy indicator that fits anywhere — buttons, toolbars, empty panels, or standalone skeletons — with twelve visual styles from a single `variant` attribute.

## Preview

> **tip:** 
Use `<kai-loader>` for a "working" indicator outside the chat thread — inside a send button, a toolbar corner, or as a panel placeholder. In SolidJS, use the `Loader` primitive directly for finer composition control.

## Usage

All props are plain HTML attributes — no binding layer required:

```html
<kai-loader variant="dots" size="md"></kai-loader>
```

- **`variant`** — `circular` for generic waits, `wave`/`bars` for audio or processing, `text-shimmer` for an AI "thinking" state.
- **`size`** — `sm` inside a button, `lg` as a panel placeholder.
- **`text`** — required for text-based variants (`text-blink`, `text-shimmer`, `loading-dots`); e.g. `text="Thinking…"`.

## Examples

### Default Spinner

The out-of-the-box circular spinner — no attributes needed.

### Dots

Three-dot pulse — works well inside buttons or inline next to text.

### Wave

Rhythmic wave — great for audio processing or streaming output.

### Text Shimmer

Animates a label with a shimmer sweep — ideal for AI "Thinking…" states.

### Sizes

### Terminal

Retro blinking cursor — a good touch for developer tools or code-generation states.

## Props

## Composed from