Components

Loading spinner

Tell a user they need to wait, because something is happening.

Loading the next task for this case

HTML
React

<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>

Props

Name	Type	Description
id	other	'id' attribute to place on the base HTML element
classBlock	other	Block name override in BEM style classes applied to all elements
classModifiers	other	BEM style modifiers to apply to the base HTML element
className	other	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

Loading...

HTML
React

<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...</h1>
  </div>
</div>

<LoadingSpinner />

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.

Accessibility

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:

aria-live=”polite”
role=”status”
the div is called “loading”

This component only uses HTML and css - it does not use javascript. It does not require users to have javascript enabled.

Research

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

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.