Loading spinner

A circular spinner for indeterminate loading states. It uses the trust primary colour for the rotating segment and centres itself with margin: auto.

          
<div class="loading" role="status" aria-label="Loading"></div>
          
        

Live example:

Accessibility

Add role="status" and an aria-label (or visually hidden text) so assistive technology announces that content is loading. role="status" is a polite live region, so it does not interrupt the user.

The animation respects the user's motion preference: the design system globally honours prefers-reduced-motion: reduce, which all but stops the spin for users who ask for reduced motion.

Classes

loading

The spinner. Apply to an empty block element; its size is fixed at 2rem square.

Loading inside a button

For a loading state within a button, use the spinner pattern documented on the Buttons page rather than this standalone spinner.