Loading spinner

Indicating that something is happening

Use

Consider how long the spinner will be visible

Loading spinners are decorative in the sense that they are only visual, if it’s necessary to communicate what’s happening, we can use a loading text or aria-label which can be set on its parent.

Case	Attributes	Reason
Short loading	None	Not necessary
Long loading accompanied by a visible loading text	None	Visible text does the job
Long loading, no text	`aria-label="Loading"` on parent	Announces loading
Rendering happens on the same page as the loading	`role="status"` on the outermost container with change	Announces changes, like when the loading is complete. Combine with one of the above.

Reference

Implementation and sizes

The spinner is an animated svg implemented like the other UI icons.

<span data-mybicon="mybicon-spinner"></span>
<span data-mybicon="mybicon-spinner" data-mybicon-class="icon--l"></span>
<span data-mybicon="mybicon-spinner" data-mybicon-class="icon--xl"></span>

In submit button

<button disabled class="btn btn--green" aria-label="Loading">
  <span data-mybicon="mybicon-spinner"></span>
</button>

Alongside text

Loading entries

<div class="mal tc">
  <div class="text-1.25r">Loading entries</div>
  <span
    data-mybicon="mybicon-spinner"
    data-mybicon-class="icon--xl"
  ></span>
</div>