Spinners

Something is happening, and it will not take long

Spinner

With words for screen readers; it stops turning for anyone who asked for less motion.

Syncing sales…

Show the code

<span class="cluster gap-2" role="status">
<span class="spinner" aria-hidden="true">
</span>
<span>Syncing sales…</span>
</span>

In a button

The button keeps its width and says it is busy.

Show the code

<button type="button" class="btn btn-primary" aria-busy="true">
<span class="spinner sm" aria-hidden="true">
</span>Charging the card…</button>

Sizes and kinds

A large ring for a panel or a page, and the growing dot (DreamsPOS, Vuexy).

Show the code

<span class="cluster gap-4" role="status">
<span class="spinner sm" aria-hidden="true">
</span>
<span class="spinner" aria-hidden="true">
</span>
<span class="spinner lg" aria-hidden="true">
</span>
<span class="spinner grow" aria-hidden="true">
</span>
<span class="spinner grow lg" aria-hidden="true">
</span>
<span class="sr-only">Loading…</span>
</span>