Overview
Overview
A loading spinner is a small looped animation used to indicate that content is being loaded or processed in the background.
Its purpose is to provide feedback to the user that the system is working on their request and to manage user expectations during waiting periods. It helps reassure users that the system is active and has not frozen, thus improving the overall user experience during potentially frustrating wait times.
There are three types of loading spinner, default, stacked and minimal.
Default
By default the loading spinner is left aligned with a label on the right which indicate the type action that is occurring.
Vanilla example
Uploading...
Uploading...
<!--
Light: <div class="qld__loading_spinner">
Dark: <div class="qld__loading_spinner qld__loading_spinner--dark">
-->
<section class="qld__body">
<div class="container-fluid">
<!-- Loading spinner container with accessibility role set to 'status' -->
<div class="qld__loading_spinner qld__loading_spinner--landscape" role="status">
<!-- Visual representation of the spinner -->
<span class="qld__loading_spinner-wheel"></span>
<!-- Text label for the spinner, visible and text styled to md size via qld__display-md class -->
<div class="qld__loading_spinner-label qld__display-md">Uploading...</div>
</div>
</div>
</section>
<section class="qld__body qld__body--dark">
<div class="container-fluid">
<!-- Loading spinner container in dark mode with accessibility role -->
<div class="qld__loading_spinner qld__loading_spinner--landscape qld__loading_spinner--dark" role="status">
<!-- Visual representation of the spinner (same as above but styled for dark theme) -->
<span class="qld__loading_spinner-wheel"></span>
<!-- Text label for the spinner, visible and text styled to md size via qld__display-md class -->
<div class="qld__loading_spinner-label qld__display-md">Uploading...</div>
</div>
</div>
</section>
Stacked
If required, you can horizontally centre the loading spinner to align with other layout elements or to fit space requirements.
Vanilla example
Uploading...
Uploading...
<!--
Light: <div class="qld__loading_spinner">
Dark: <div class="qld__loading_spinner qld__loading_spinner--dark">
-->
<section class="qld__body">
<div class="container-fluid">
<!-- Loading spinner container with accessibility role set to 'status' -->
<div class="qld__loading_spinner" role="status">
<!-- Visual representation of the spinner -->
<span class="qld__loading_spinner-wheel"></span>
<!-- Text label for the spinner, visible and text styled to md size via qld__display-md class -->
<div class="qld__loading_spinner-label qld__display-md">Uploading...</div>
</div>
</div>
</section>
<section class="qld__body qld__body--dark">
<div class="container-fluid">
<!-- Loading spinner container in dark mode with accessibility role -->
<div class="qld__loading_spinner qld__loading_spinner--dark" role="status">
<!-- Visual representation of the spinner (same as above but styled for dark theme) -->
<span class="qld__loading_spinner-wheel"></span>
<!-- Text label for the spinner, visible and text styled to md size via qld__display-md class -->
<div class="qld__loading_spinner-label qld__display-md">Uploading...</div>
</div>
</div>
</section>
Minimal
Use this option only when the spinner needs to be incorporated within other components or where space is restricted. Try to incorporate the label action somewhere else within the component if possible.
Vanilla example
<!--
Light: <div class="qld__loading_spinner qld__loading_spinner--icon_only">
Dark: <div class="qld__loading_spinner qld__loading_spinner--dark">
-->
<section class="qld__body">
<div class="container-fluid">
<!-- Loading spinner container with accessibility role set to 'status' -->
<div class="qld__loading_spinner qld__loading_spinner--icon_only" role="status">
<!-- Visual representation of the spinner -->
<span class="qld__loading_spinner-wheel"></span>
<!-- Text label for the spinner, visible and text styled to md size via qld__display-md class -->
<div class="qld__loading_spinner-label qld__display-md">Uploading...</div>
</div>
</div>
</section>
<section class="qld__body qld__body--dark">
<div class="container-fluid">
<!-- Loading spinner container in dark mode with accessibility role -->
<div class="qld__loading_spinner qld__loading_spinner--dark qld__loading_spinner--icon_only" role="status">
<!-- Visual representation of the spinner (same as above but styled for dark theme) -->
<span class="qld__loading_spinner-wheel"></span>
<!-- Text label for the spinner, visible and text styled to md size via qld__display-md class -->
<div class="qld__loading_spinner-label qld__display-md">Uploading...</div>
</div>
</div>
</section>
Usage guidelines
When to use
- Use the small looped animation loading spinner for actions that typically take between 2 to 10 seconds to complete, such as fetching data from a server, processing user inputs, or performing calculations (Sherwin, 2014).
- Use the spinner to indicate that the system is actively working on the user's request and to provide visual feedback during waiting periods.
- Utilise the spinner in scenarios where users might otherwise perceive the application as unresponsive or stagnant.
- After immediate actions: Display after actions that trigger a delay, such as submitting a form or loading a new section of a website.
When not to use
- Consider using a different type of loading indicator, such as a progress bar or a message indicating the loading status, for actions that take significantly longer than 10 seconds to complete. A spinner may not be sufficient for longer loading times and could lead to user frustration (Sherwin, 2014).
- Avoid using the spinner for actions that are instantaneous or nearly instantaneous, as it may create unnecessary visual distraction and give the impression of unnecessary processing (Microsoft, n.d).
How to use
Do
- The loading spinner label should accurately explain the action that is occurring. For example, “Loading...”, “Submitting...”, “Saving...”, “Processing...” (Sherwin, 2014).
- Place the spinner strategically near the element or section of the interface that is being loaded to provide clear visual feedback to users about the action being performed. Typically, place the spinner centrally in the relevant area (or page) where the action is occurring to maintain visual balance and focus (IBM, n.d.).
- Introduce the spinner after a small delay (e.g., 200 milliseconds) to avoid flashing it for trivially short operations.
- Use one Spinner at a time (Microsoft, n.d.).
- The loading spinner can be scaled down to fit within a single item on page such as a button if the loading experience is contextual (IBM, n.d.).