# Spinner · MIAN

Indeterminate loading indicators: ring and dots.

- Id: `spinner` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/spinner
- Use for: spinner, loading indicator, busy.
- Alternatives: loader, 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-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.

## Examples

### Ring and dots

```html
<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>
```

## Source

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