Loader
Eight loading indicators, dots, bars, wave, grid, pulse, orbit, ring and a top-of-page line, in the current colour.
Loaders
Large size. Each takes the colour of a colour role or of the text around it.
<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
Loading invoices…
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/loader.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.