Spinner
Indeterminate loading indicators: ring and dots.
Ring and dots
<span class="mn-spinner mn-spinner-sm" role="status" aria-label="Loading"></span>
<span class="mn-spinner" role="status" aria-label="Loading"></span>
<span class="mn-spinner mn-spinner-lg mn-primary" role="status" aria-label="Loading"></span>
<span class="mn-dots" role="status" aria-label="Typing"><span></span><span></span><span></span></span>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/spinner.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-spinner | Ring. Inherits the text colour unless a role is set. |
| mn-spinner-sm · mn-spinner-lg | Sizes. |
| mn-dots | Three-dot loader (three empty spans). |
Accessibility
- Give the spinner role="status" and a label, or hide it and mark the loading region aria-busy="true". Motion slows under reduced motion.