# Loader

Loading indicators in seven styles, including spinner, ring, dots, bars and pulse. When the work finishes, the ring closes into a check before handing off to your content.

> Primitive · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add loader
```

## Import

```tsx
import { Loader } from "@/components/ui/loader/loader";
```

## Variants

- `colors` — Colors: `npx @lumioui/cli add loader-colors`
- `context` — Context: `npx @lumioui/cli add loader-context`
- `sizes` — Sizes: `npx @lumioui/cli add loader-sizes`
- `variants` — Variants: `npx @lumioui/cli add loader-variants`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `LoaderVariant` | Which animation to render. Default "spinner". |
| `size?` | `number` | Base square size in px. Everything scales from this. Default 32. |
| `speed?` | `number` | Cycle-length multiplier (2 is half as fast). Default 1. |
| `active?` | `boolean` | Run the animation. false pauses the single shared loop (off-screen,  idle) and reports not-busy to screen readers. Default true. |
| `label?` | `string` | Accessible label announced to screen readers. Default "Loading". |
| `color?` | `"primary" | "foreground" | "mutedForeground" | "destructive"` | Color token to use. Default "primary". |
| `done?` | `boolean` | The wait is over. The loader resolves in place: the loop stops, the  ring closes and ignites, a check draws inside, then it holds. |
| `onResolved?` | `() => void` | Called once the resolved ring has been held (~650ms after it lands). |
| `doneLabel?` | `string` | Accessible label once done. Default "Done". |
| `haptics?` | `boolean` | Fire the success haptic on resolve. Default true. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/loader