Spinners

A pure-CSS rotating arc. The visible edge uses currentColor, so it inherits the surrounding text colour.

For buttons, prefer the .btn-loading modifier (or React’s loading prop) — see Buttons → Loading.

Examples

Sizes

Vanilla CSS

<span class="spinner spinner-sm" role="status" aria-label="Loading"></span>
<span class="spinner" role="status" aria-label="Loading"></span>
<span class="spinner spinner-lg" role="status" aria-label="Loading"></span>

React

<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />

Inherits text colour

Retrying connection

Vanilla CSS

<span style="color: var(--color-danger)">
  <span class="spinner spinner-sm" role="status" aria-label="Loading"></span>
  Retrying connection
</span>

React

<span style={{ color: "var(--color-danger)" }}>
  <Spinner size="sm" /> Retrying connection
</span>