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.

<div class="spinner"></div>

Sizes

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

<div class="spinner size-xs"></div>
<div class="spinner size-m"></div>
<div class="spinner size-4xl"></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"></div>
<div class="spinner neutral"></div>
<div class="spinner secondary"></div>
<div class="spinner success"></div>
<div class="spinner danger"></div>
<div class="spinner warning"></div>

Accessibility

Spinners do not include any semantic information for 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.