Screen loader

A screen loader is a temporary indicator to tell the user that a screen is loading. Once it’s finished, the loader is replaced by the screen. If on mobile please refer to the progress bar guidance page.

A loader.
When to use

Use a screen loader:

  • when you want the loader to overlay the whole screen

Don't use a screen loader:

  • when an in-line loader would make more sense and be less disruptive to the user experience
  • when you use Forest Green theme for the screen

Best practice

Make sure screen loaders that show one after the other on different screens are the same size and position. Test the whole flow to check the screen loaders are consistent from start to finish in terms of screen location and size.


The screen loader should be centred horizontally on the screen, and be towards the top of the screen on Web.



Developer documentation