Spinners
Spinners can be used to indicate that the application, or part of the application, is waiting for a process to complete.
<span class="sba-c-spinner sba-c-spinner--small" aria-valuetext="Loading" role="progressbar"></span>
<span class="sba-c-spinner" aria-valuetext="Loading" role="progressbar"></span>
<span class="sba-c-spinner sba-c-spinner--big" aria-valuetext="Loading" role="progressbar"></span>Changing the spinner color
To change the color of the spinner, one only has to change the color property of the spinner element. This can be done with the standard Design System utility classes. The color of the spinner also defaults to inherit, so it will take on the color of the text in its parent container.
<span class="sba-c-spinner sba-u-color--primary" aria-valuetext="Loading" role="progressbar"></span>
<span class="sba-c-spinner sba-u-color--success" aria-valuetext="Loading" role="progressbar"></span>
<span class="sba-c-spinner sba-u-color--muted" aria-valuetext="Loading" role="progressbar"></span>Spinners inside of buttons
Spinners will also use the margin utility class to provide even spacing.
<button class="sba-c-button">
<span class="sba-c-spinner sba-c-spinner--small sba-u-margin-right--1" aria-valuetext="Loading" role="progressbar"></span> Loading
</button>
<button class="sba-c-button sba-c-button--inverse">
<span class="sba-c-spinner sba-c-spinner--small sba-c-spinner--inverse sba-u-margin-right--1" aria-valuetext="Loading" role="progressbar"></span> Loading
</button>
<button class="sba-c-button sba-c-button--outline sba-c-button--big">
<span class="sba-c-spinner sba-u-margin-right--1" aria-valuetext="Loading" role="progressbar"></span> Big button
</button>
<button class="sba-c-button sba-c-button--success sba-c-button--big">
<span class="sba-c-spinner sba-u-margin-right--1" aria-valuetext="Loading" role="progressbar"></span> Big green button
</button>When to use
To indicate a loading state for quick asynchronous tasks, such as a block of content on the page or after a button that performs a certain type of action has been clicked.
When to consider something else
- When the process it is waiting for takes a long time. Spinners provide no feedback other than that we're waiting, so long processes can make users nervous that something went wrong. Consider adding descriptive text or another UX pattern entirely.
- When you are loading a whole page of content. If all you show the user is a spinner, the user may spend several seconds watching the spinner to be surprised with all the content all at once. Consider using a skeleton screen so the user knows what to expect.