# Loader

> Six loading indicators (spinner, dots, bars, pulse, orbit, ring) with one API.

Component · Pro · https://lodeui.com/components/loader

## When to use

- Short waits where you can't show a skeleton: buttons, overlays, small panels.

## When not to use

- Page loads with known layout: use skeletons.

## Installation

```bash
npx shadcn@latest add @lode/loader
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Loader } from "@/components/ui/loader";

<Loader variant="dots" />
<Loader variant="ring" size={32} label="Uploading" />
```

## API reference

### Loader

One component, six indicators. Uses currentColor.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"spinner" \| "dots" \| "bars" \| "pulse" \| "orbit" \| "ring"` | `"spinner"` | Style. |
| size | `number` | `24` | Size in px. |
| label | `string` | `"Loading"` | Announced to screen readers. |

## Accessibility

- role="status" with a label; the visuals are hidden.
- Reduced motion slows to gentle fades or stops spinning.

## Motion

- Each variant loops smoothly at 0.8–1.4 seconds per cycle.

## Responsive behavior

- Fixed size; inherits color from text.

## Performance

- SVG and transforms only.

## Notes for AI

- Change label to describe the wait, e.g. "Saving".

## Related

- [Skeleton](https://lodeui.com/components/skeleton) — Shimmering placeholders for loading content.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.