Loading spinner

[govuk-design-system]

What

Help users understand that they need to wait for something to happen.

Why

This pattern is used on GOV.UK Verify - when returning users from Verify to services, data matching takes place which can take some time, so we present a spinner and explanatory text.

Anything else

• Example: View demo of a prototype that was tested with users (draft guidance below includes some findings)
• Read the draft guidance on Google Docs
• Download the code on GitHub

[joelanman]

This is another example of a pattern where we should lead with 'try to avoid this' - we should aim for services to be fast and responsive so users never have to worry if something has gone wrong. At the same time.

EDIT

Not sure what happened there looks like I posted half way through a sentence. I think I was going to say something like, if we're aware of a long delay that is out of our hands, or just a delay that is unpredictable (for example uploading a file), it's important to reassure the user that things are ok, and they shouldn't close the tab, navigate away or refresh.

[eliothill]

The spinner (and loading screen) happens a couple of times on our service. We have found adding content to clarify what is happening during the 'loading' process reassured users, even if the loading screen wasn't on long enough for the content to be read.

Aware this is probably complimentary to the component but thought i'd share ✌️

Examples of the content:

Processing payment

[edwardhorsford]

Uploading things is a good area where this may be useful. My service processes files for a period before they can be played back to the user. We'll ajax some content in once they're loaded, but would like to have a placeholder area doing something whilst we wait.

[olliewilliams-CH]

@eliothill : On your comment about a supplemental heading and spinners not running long enough to read the content...

In a previous life I did a lot of design for travel websites where searching and filtering was the biggest interaction the users had with the website. As a result we ended up designing all manner of custom spinner designs but something we found was that our users would benefit from a spinner having a minimum runtime. As a result, even if a search/filter action took milliseconds to complete, we'd always ensure the spinner was shown for just a couple of seconds at least.

Just this small amount of time helped the user understand that a thing had just happened and they could identify what that was. It likely also had an accessibility benefit(however marginal) in that there wasn't a jarring visual flash of content the user wasn't expecting and couldn't digest and that we would also have time for things like aria-live events to fire in a meaningful way.

Just a few thoughts based on my own experience of course.

[robinwhittleton]

If/when this is implemented, it’d be good to include a prefers-reduced-motion media query to replace the image with Loading… text if requested.

[MalcolmVonMoJ]

The MoJ service I worked on last year have a number of such spinners. We opted for a CSS approach rather than an animated gif. It is therefore much smaller, easier to maintain and customise.

It looks like this (uploaded a gif - the irony):

The basic CSS code we used:

.ccms-loader {
  border: 12px solid #DEE0E2;
  border-radius: 50%;
  border-top-color: #005EA5;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

[samuelhwilliams]

In DIT, we're looking at using something like this to indicate that an app is being created behind-the-scenes. With a static page, we found that after a while users felt like something had broken - so want to add something dynamic/animated to help give confidence that something is still happening.

We've opted for the design @MalcolmVonMoJ shared above for now.

[edwardhorsford]

I came across a video of what the passports upload spinner looked like. The text was announced to AT.

[RossGower]

This UI/Interaction is for a specific need where a users triggers a database export from a casework/intel system. Content still needs a bit of work. There are also states for failure

[joelanman]

Seems meta refresh is to be avoided for accessibility reasons, which makes me wonder how this pattern can be achieved in a progressively enhanced way https://dequeuniversity.com/rules/axe/4.1/meta-refresh

Update

We implemented it like this:

Have a dynamic element on the page that is updated with the status. For example

Processing...

Use aria-live on this element When complete, change the contents of that element to something like

Complete

(link) Continue

This means no page changes happen without the user's control, and all users including screen reader users are informed of the status as it changes.