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>

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>