An animated, indeterminate loading indicator — a rotating 270° arc that tells users something is happening behind the scenes.
Two sizes — l (48px) and
s (24px).
type sets the colour;
inverse is tuned for dark surfaces.
loading states of unknown duration. For a determinate task with a known percentage, use a Progress Bar.
label describing what’s loading.role="status" so the loading state is announced; the SVG itself is aria-hidden.label (default “Loading”) becomes the aria-label.prefers-reduced-motion it slows rather than stops — the motion is the meaning, so it keeps conveying “in progress”.type that meets WCAG AA against its background — inverse on dark.loading state uses a spinner.