Loading

A spinner, drawn in currentColor so it works on any surface and inside a button. No component library renders this one: it is a single element you place yourself.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`loading`	A spinner. Inherits its colour, sized with width and height

Basic

Same markup in both builds

<span class="loading"></span>
<span class="loading" style="width: 2rem; height: 2rem"></span>
<button class="btn"><span class="loading" style="width: 1rem; height: 1rem"></span> Saving</button>
<p><span class="loading" style="width: 0.9rem; height: 0.9rem"></span> Loading results</p>

The spin stops under prefers-reduced-motion. Pair it with aria-busy="true" on the region it is loading, or with visually hidden text, since the element itself says nothing.