Spinner

A spinner is used to visually convey that something is in a loading state.

Usage

Use the .spinner class to turn a <div> into a spinner. You should also include a [fallback] attribute with text to display when the user has prefers-reduce-motion enabled.

<div class="spinner" fallback="Loading..."></div>

Sizes

You can adjust the size of a spinner using any of the .size-* utility classes.

<div class="spinner size-xs" fallback="⏳"></div>
<div class="spinner size-m" fallback="⏳"></div>
<div class="spinner size-4xl" fallback="⏳"></div>

Colors

A spinner uses the .primary color by default. You can adjust the color using the .neutral, .secondary, .success, .danger, and .warning classes.

<div class="spinner" fallback="⏳"></div>
<div class="spinner neutral" fallback="⏳"></div>
<div class="spinner secondary" fallback="⏳"></div>
<div class="spinner success" fallback="⏳"></div>
<div class="spinner danger" fallback="⏳"></div>
<div class="spinner warning" fallback="⏳"></div>

Accessibility

Spinners do not include any semantic information for screen readers ([fallback] text is not announced by screen readers).

They should be paired with either a visible or .visually-hidden ARIA live region that provides informative text about the change in app state.