Spinner and skeleton

data-spinner

data-spinner is a small turning ring for work that is under way. data-skeleton is a grey bar standing in for content that has not arrived.

Spinner

Rendering pages…

html

<p><span data-spinner role="status" aria-label="Loading"></span> Rendering pages…</p>

The spinner is empty, so it needs role="status" and a label to say anything at all.

Skeleton

html

<article data-tone="card" aria-busy="true" style="display:grid;gap:.6rem">
  <span data-skeleton="title"></span>
  <span data-skeleton></span>
  <span data-skeleton style="width:80%"></span>
</article>

aria-busy="true" on the container is what tells a screen reader to wait; the bars themselves say nothing.

Notes

The sizes are title (taller, 55% wide), block (7rem tall) and the default line.
Under prefers-reduced-motion: reduce the spinner stops turning and shows two coloured arcs instead.