COMPONENTS

Loading indicators

A single spinner class supplies decorative CSS motion. Visible text explains what is happening; your application decides when to show or remove the indicator.

Usage

Markup: .spinner

Behaviour: Application owns loading state; reduced motion stops the spinner.

The spinner is decorative: use aria-hidden="true" and keep meaningful text beside it. A static example needs no live-region role.
For application updates, establish a role="status" region before changing its text. aria-busy on the affected content can communicate that work is incomplete; your application manages its value.
Size and motion follow shared parent settings. data-motion="none" and reduced-motion preferences stop the custom spinner. The visible message remains available.

Component API and styling module · Inherited appearance settings

Visible loading text

The text carries the meaning, so the spinner is hidden from assistive technology.

Loading your records…

<p><span class="spinner" aria-hidden="true"></span> Loading your records…</p>

Without animation

Configure motion on the parent to keep a stationary indicator.

Preparing your report…

<section data-motion="none" data-size="large">
  <p><span class="spinner" aria-hidden="true"></span> Preparing your report…</p>
</section>

Application-owned status

Keep the live region in place before updating it; hide the decorative spinner once loading finishes.

<!-- Update this established region from your application. -->
<p role="status">
  <span class="spinner" aria-hidden="true"></span>
  Loading results…
</p>

Loading inside a sized action

The action supplies size once; its spinner follows the resolved text size without multiplying that setting again. Applications control disabled and loading state.

<section class="row" data-size="large">
  <button type="button" disabled>
    <span class="spinner" aria-hidden="true"></span>
    Preparing report…
  </button>
</section>