Spinner

Edit on GitHub

An animated, indeterminate loading indicator that shows something is in progress, without conveying how much progress has been made or how long it will take.

@volvo-cars/css v2.5.1

Apply the spinner class to a labelled native <progress> element. The indicator inherits currentColor.

Show codeHide code

<progress class="spinner" aria-label="Loading"></progress>

Sizes

Control the size with width utility classes. The border thickness scales proportionally.

Class	Size
`w-16`	16 px
`w-24`	24 px
`w-32`	32 px
`w-40`	40 px
`w-48`	48 px
.	40 px (default)

Accessibility

Always add aria-label (e.g. "Loading") so screen readers announce the purpose
Set aria-busy="true" on the container that is loading content
Use aria-live="polite" regions to announce when loading completes

<div aria-busy="true" aria-label="Loading results">
  <progress class="spinner" aria-label="Loading"></progress>
</div>

CSS reference

Class	Description
`spinner`	Animated circular progress indicator

See Sizes above for the width utility classes. The spinner respects prefers-reduced-motion through the CSS animation system.