Tell a user they need to wait, because something is happening.
Loading the next task for this case
<div class="hods-loading-spinner"> <div class="hods-loading-spinner__spinner" aria-live="polite" role="status" ></div> <div class="hods-loading-spinner__content"> <h1 class="govuk-heading-m"> Loading the next task for this case </h1> </div> </div>
<LoadingSpinner> Loading the next task for this case </LoadingSpinner>
|id||string||'id' attribute to place on the base HTML element|
|classBlock||string||Block name override in BEM style classes applied to all elements|
|classModifiers||other||BEM style modifiers to apply to the base HTML element|
|className||string||Extra classes to apply to the base HTML element|
When to use this component
Use a loading spinner to inform users they need to wait for something to happen. For example, you can use a loading spinner to show that a result is taking time to process.
Consider whether the speed and responsiveness of the service can be technically improved before using a loading spinner.
How it works
If something goes wrong
If something goes wrong or the loading period times out, tell users there has been a problem and provide a link to another suitable action. Do not allow the loading spinner to loop indefinitely.
Writing for this component
Explain what the user is waiting for.
The explanation is a heading 1, so do not show another heading 1 with the loading spinner.
If you do need a loading screen, ensure that:
- you agree a maximum loading time that is suitable for the action
- content clearly describes what the user is waiting for
To help assistive technology users, ensure your code includes:
- the div is called “loading”
The loading spinner is used by:
- Atlas caseworking system
- Manage appointment booking
- Generic ID verification web
Another department found that using an animated loading spinner gave users more confidence that something is still happening, over a static message.
Help improve this component
This component needs improving. We need evidence about:
- further accessibility considerations
- using the loading spinner for part of a page