# Loader · MIAN

Eight loading indicators, dots, bars, wave, grid, pulse, orbit, ring and a top-of-page line, in the current colour.

- Id: `loader` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/loader
- Use for: loading animation, page loader, loading dots, progress line.
- Alternatives: spinner, skeleton.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-loader`: The loader, with one variant class. Size with mn-loader-sm / -lg or --_s; colour with a colour role or currentColor.
- `mn-loader-dots · -bars · -wave · -grid`: Need child <i> elements: 3 dots, 5 bars, 5 wave, 9 grid.
- `mn-loader-pulse · -ring`: No children.
- `mn-loader-orbit`: Two <i> children.
- `mn-loader-line`: A full-width line for the top of a page or a card.

## Accessibility

- Give the loader role="status" and an aria-label (“Loading invoices”), or put visible text next to it.
- Under prefers-reduced-motion every loader slows to a gentle 3-second cycle.
- For waits over a few seconds, prefer a progress bar with a value, or a skeleton.

## Examples

### Loaders

Large size. Each takes the colour of a colour role or of the text around it.

```html
<span class="mn-loader mn-loader-lg mn-loader-dots" role="status" aria-label="Loading"><i></i><i></i><i></i></span>
<span class="mn-loader mn-loader-lg mn-loader-bars" role="status" aria-label="Loading"><i></i><i></i><i></i><i></i><i></i></span>
<span class="mn-loader mn-loader-lg mn-loader-wave mn-accent" role="status" aria-label="Loading"><i></i><i></i><i></i><i></i><i></i></span>
<span class="mn-loader mn-loader-lg mn-loader-grid" role="status" aria-label="Loading"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
<span class="mn-loader mn-loader-lg mn-loader-pulse mn-info" role="status" aria-label="Loading"></span>
<span class="mn-loader mn-loader-lg mn-loader-orbit" role="status" aria-label="Loading"><i></i><i></i></span>
<span class="mn-loader mn-loader-lg mn-loader-ring mn-success" role="status" aria-label="Loading"></span>
```

### Sizes and a line

```html
<div class="mn-stack" style="max-width:24rem">
  <div class="mn-row" style="--mn-gap:1.25rem"><span class="mn-loader mn-loader-dots mn-loader-sm" role="status" aria-label="Loading"><i></i><i></i><i></i></span><span class="mn-loader mn-loader-dots" role="status" aria-label="Loading"><i></i><i></i><i></i></span><span class="mn-loader mn-loader-dots mn-loader-lg" role="status" aria-label="Loading"><i></i><i></i><i></i></span></div>
  <div class="mn-card"><span class="mn-loader mn-loader-line" role="status" aria-label="Loading invoices"></span><div class="mn-card-body mn-muted">Loading invoices…</div></div>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/loader/source