Spinner

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<span class="tui-spinner tui-spinner--labelled" role="status">
  <span class="tui-spinner__ring" aria-hidden="true">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </span>
  <span class="tui-spinner__label">Importing 3 of 14 files</span>
</span>

<!-- Without the words on screen, they are still said: drop --labelled -->

import { spinnerHTML } from '/kit/kit.mjs';

// The markup of one, so a script does not have to type eight <i>.
el.innerHTML = spinnerHTML({ label: 'Importing', size: 'lg', labelled: true });
spinnerHTML({ label: 'Saving', status: false });     // inside a region that already says it

Needs kit.css and kit.mjs. How to install the kit.

• It is role="status" with its words in .tui-spinner__label, so a screen reader says “Importing 3 of 14 files” politely when it appears; the eight lamps are aria-hidden.
• Busy is said in words and shown by the chase, never by colour alone, and the words are what to put on screen when the wait may be long.
• Under reduced motion the chase stops and the lamp at the top stays lit, so it is a steady lamp that still says busy. Nothing else moves, and it never speeds up or bounces.
• The chase runs a second at a time and is the sign that something is loading, not decoration; it pauses while it is off screen, and it should be taken out of the page the moment the work ends.
• It is not a control: it takes no focus and no pointer, and on a phone it is the same size.

Eight lamps on a circle, each a dim cap with a lit layer on top of it. Every lit layer runs the same short fade, 960 milliseconds long, started a step later than its neighbour, so the lit one appears to travel and the lamps just behind it are still dying away. The lamps are placed with a direction and a radius rather than rotated, so each one’s shine stays on its upper left. In the finishes that draw their lamps as square pixels or printed rings, the spinner’s lamps are drawn the same way.