Loader – Tsunami

Spinner

Add role="status" and an aria-label that says what is loading.

<span class="loader" role="status" aria-label="Loading"></span>

Spinner sizes: xs, sm, default and lg

<div class="stack" data-direction="row" data-gap="lg">
  <span class="loader" data-size="xs" role="status" aria-label="Loading"></span>
  <span class="loader" data-size="sm" role="status" aria-label="Loading"></span>
  <span class="loader" role="status" aria-label="Loading"></span>
  <span class="loader" data-size="lg" role="status" aria-label="Loading"></span>
</div>

Spinner in a button

A spinner in a button is decorative. Add aria-hidden="true" and let the button text describe the state.

<div class="stack" data-direction="row" data-gap="sm">
  <button type="button" class="btn" data-variant="primary" disabled><span class="loader" data-size="xs" aria-hidden="true"></span>Saving…</button>
  <button type="button" class="btn" disabled><span class="loader" data-size="xs" aria-hidden="true"></span>Loading…</button>
  <button type="button" class="btn" data-variant="danger" disabled><span class="loader" data-size="xs" aria-hidden="true"></span>Deleting…</button>
</div>

Spinner beside text

Processing payment…

<article class="item" data-variant="muted">
  <figure><span class="loader" data-size="xs" role="status" aria-label="Processing"></span></figure>
  <section><h3>Processing payment…</h3></section>
  <aside>$39.00</aside>
</article>

Spinner while a card's content loads

Add aria-busy="true" to the loading region. If it holds only a spinner, the spinner is centred in a box at least 128px tall.

Sales over time

<div class="card">
  <header>
    <h2>Sales over time</h2>
  </header>
  <section aria-busy="true" style="min-height: 12rem">
    <span class="loader" role="status" aria-label="Loading sales"></span>
  </section>
</div>

Attributes

Attribute / element	Values	Description
`.loader`		16px spinner, 2px stroke in `currentColor` on a faint 20% track. Still spins (slower) with reduced motion.
`data-size`	`xs`, `sm`, `lg` (omit = 16px)	`xs` 12px (in buttons), `sm` 14px, `lg` 24px
`role`	`status`	On a standalone spinner, with an `aria-label` that names what is loading.
`aria-label`	Text	The name screen readers announce, e.g. "Loading sales".
`aria-hidden`	`true`	In a button or next to text that already states the status.
`[aria-busy="true"]`	`true`	On the loading container. If it holds only a `.loader`, it is centred, at least 128px tall and muted. Remove it once the content arrives.