# Loading indicator

> A shape that morphs while it spins, for waits under five seconds.

## Basic

M3 Expressive's indicator for a short wait. One element, CSS-only, no JavaScript plugin. The shape morphs through a circle and four cookie shapes while the whole thing rotates.

```
<span class="loading-indicator" role="status" aria-label="Loading"></span>
```

The element is empty, so it reports nothing on its own. `role="status"` announces the wait and `aria-label` gives it something to announce — not `role="progressbar"`, which promises an `aria-valuenow` an indeterminate indicator does not have.

## Contained

`contained` puts the indicator on a `secondary-container` circle and switches it to `on-secondary-container`. Use it over an image, a coloured surface, or anything else the plain indicator would get lost against.

```
<span class="loading-indicator contained" role="status" aria-label="Loading"></span>
```

## Or a progress indicator?

This **supersedes the indeterminate circular [progress indicator](/preloader.html.md)**. Reach for the loading indicator whenever you would have written `<span class="progress circular">` with no value. `.progress` keeps everything else — both linear bars, and every case where you know the percentage.

| Situation | Use |
| --- | --- |
| Under 200 ms | Nothing — show the result |
| Up to about 5 s, percentage unknown | `.loading-indicator` |
| Longer, percentage known | `.progress`, determinate |
| Longer, percentage unknown | `.progress`, indeterminate linear |

## Tokens

Override any of these to retheme one indicator. The colours are role tokens, never raw hex.

| Token | Default | What it sets |
| --- | --- | --- |
| `--md-comp-loading-indicator-active-indicator-size` | `38px` | The morphing shape. |
| `--md-comp-loading-indicator-container-size` | `48px` | The box it sits in — the visible circle when `contained`. |
| `--md-comp-loading-indicator-active-indicator-color` | `primary` | The shape's fill. |
| `--md-comp-loading-indicator-container-color` | `transparent` | The container fill. |
| `--md-comp-loading-indicator-duration` | `3000ms` | One full morph-and-spin cycle. |

```
<span class="loading-indicator"
      style="--md-comp-loading-indicator-active-indicator-color: var(--md-sys-color-error)"
      role="status" aria-label="Loading"></span>
```

`prefers-reduced-motion: reduce` stops both animations and leaves the circle.