Spinner

Spinner shows that something is loading. It is one span drawn as a ring that takes the current text color, in three sizes, with no script.

Public web API

One root hook and an optional size. Give it a text alternative every time.

<span data-bitsy-spinner role="status"><span class="u-visually-hidden">Loading invoices</span></span>

<button data-bitsy-button type="button" disabled>
  <span data-bitsy-spinner data-bitsy-size="sm" aria-hidden="true"></span>
  Saving…
</button>

data-bitsy-size is sm or lg; omit it for the default.
Standalone: role="status" with a visually hidden label. In a Button: aria-hidden="true".
Mark the loading region aria-busy="true".
Under reduced motion the spin becomes a slow pulse.

Sizes and use

Sizes

Inline with text

Checking that the name is free…

Inside a Button

Centered in a Card

Foundation versus Bit

The foundation has no animated indicator. data-bitsy-spinner draws a ring from a border, follows the current text color, and ships no JavaScript. Use Progress when the amount done is known and Skeleton when the shape of the content is known.