Loading spinner

[KirTitov]

Loading spinner

SIPP (Self-Invested Personal Pension)

Overview

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

Is it useful and unique?

This pattern helps users to manage expectations.
It already exists in the Home office design library

Link to the loading spinner in Home Office design library

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.

Research on this pattern

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.

[shabana-ali]

There is a discussion regarding this on the GOV.UK Design System backlog alphagov/govuk-design-system-backlog#28

From an accessibility perspective, we need to ensure:

• it is progressively enhanced, i.e. works without JavaScript
• the progress is relayed to back to all users, e.g. screen reader users, users with cognitive disabilities
• the indicator is visible to all users, e.g. Windows High Contrast mode, screen magnification users

[Jon-Rowe-HMRC]

Agree with Shabana's comments.

Suggest any findings are posted in the GDS thread as this issue seems cross-gov, not HMRC specific.

When creating the HMRC file upload pattern we replaced spinners with tags as they were more informative for this use case (and already on-pattern): https://design.tax.service.gov.uk/hmrc-design-patterns/file-upload/