Spinner

Usage

Use a spinner for short waits (about 1–5 seconds) where you can't show progress or the shape of the result: checking a VIN, assigning a mechanic, refreshing a vehicle's location. It fades in only after 320ms, so fast responses never flash a loader.

• Loading page content (lists, cards, tables)? Use a skeleton. Measurable tasks? Use a progress bar.
• Say what is loading ("Loading service history…"), not just "Loading". Use the visible label variant when the wait may pass 2 seconds.
• Inside a button, use the button's own loading state (aria-busy) or the inline spinner next to a label that says what's happening.

Anatomy

1. Container — .spinner[role="status"]
2. Ring — .spinner__ring, aria-hidden
3. Label — .sr-only text, or visible .spinner__label
4. Inline spinner — .inline-spinner, 1em, current text color

Examples

<div class="spinner" role="status">
  <span class="spinner__ring" aria-hidden="true"></span>
  <span class="sr-only">Loading service history…</span>
</div>
<div class="spinner spinner--sm | spinner--lg" role="status">…</div>

<!-- Visible label -->
<div class="spinner spinner--labelled" role="status">
  <span class="spinner__ring" aria-hidden="true"></span><span class="spinner__label">Checking VIN…</span>
</div>

<!-- The label changes to say what's happening; the spinner is decorative -->
<button type="button" class="btn btn--secondary" aria-disabled="true">
  <span class="inline-spinner" aria-hidden="true"></span>
  <span class="btn__label">Assigning mechanic…</span>
</button>
<span class="sr-only" role="status">Assigning Lee Park to WO-1042…</span>

<!-- Keep the label and width stable instead: the button's own loading state -->
<button type="submit" class="btn btn--primary" aria-busy="true" aria-disabled="true">
  <span class="btn__label">Save work order</span><span class="btn__spinner" aria-hidden="true"></span>
</button>

API

Do and don't

Accessibility

• Role status (polite): screen readers announce the label when the spinner is inserted. Insert the spinner into the page when loading starts; don't keep a hidden one.
• When loading ends, replace the spinner with the result or a short status ("Service history loaded") so the end is announced too.
• The region that's loading can carry aria-busy="true"; controls that are waiting carry aria-disabled="true" so they stay focusable.
• Not focusable, no keyboard interaction. Inline spinners are always aria-hidden; the text next to them does the talking.
• Reduced motion stops the rotation; the ring and the label still say "loading". Forced colors: the ring uses CanvasText.

Tokens