Version
has been released! Read the upgrade guide

Progress Indicator

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

An animated indication that some form of network request or processing pending.

Overview

The Progress Indicator provides visual feedback to the user that an application is currently processing or retrieving data. Its purpose is to show that the application has not stalled - rather it is still running, however cannot update the UI with the newly requested or processed data.

1Usage

The Progress Indicator should be used when processing or retrieving data. It should be used to convey a delay in the loading of data, indicating a network request may be taking longer than usual to complete.

2Accessibility

Where a widget of content is in a loading state the aria-busy attribute should be applied. This attribute indicates an element is being modified.

The default value of aria-busy is false for all elements. When aria-busy is true for an element, assistive technologies may ignore changes to content owned by that element and then process all changes made during the busy period as a single, atomic update when aria-busy becomes false.

3Anatomy

  1. Indicator Animation. An SVG spinner that rotates to provide feedback to the user that the application is loading, rather than hung.

  2. Loading Label Accompanies the Indicator Animation to provide written context to the spinner.

4Hierarchy & Placement

The Progress Indicator can either be used as a full screen overlay, or within an individual component. Use the indicator full screen when the application is on first load. Individual components should have the progress indicator displayed when they are retrieving data, yet don't have anything to display yet.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright