Loading

Loading patterns indicate that a process is in progress. There are four variants; Skeleton states, Full-screen loading, Inline loading and Load more.

Examples
A design example of a full-screen loading, a progress bar, a loading spinner and skeleton states.

Full-screen loading

Full-screen loading indicates that the entire website or application is processing and confirms that the system is working.

An example of a full-screen loading pattern containing the text, ‘Loading maps. Please wait.’

When to use

  • Loading a page for the first time.
  • Performing resource intensive operations, e.g. processing large files.
  • Suspending an application due to a system or user action.

When not to use

  • If users need to perform other actions on the screen.
  • If loading time is less than one second.

Best practice


Use a mask

Add a mask behind the loading spinner to make it prominent.


Inform the user

Add a short, clear message that tells the user what’s happening, e.g. ‘Loading data. Please wait.’


Provide alternatives

If loading takes longer than expected, allow users to report an issue or exit the page.

Inline loading

Inline loading shows an action is processing within a component.

Three design examples of inline loading in timeline, file uploader and button components.

When to use

  • Fetching or updating content.
  • An action is in progress, e.g. submitting a form.

When not to use

  • The entire screen is processing.
  • If loading time is less than one second.

Best practice


Don’t disable other interactions

Allow interaction with other elements while loading is in progress, e.g. dismissing a notification.

A design example showing that a notification can be deleted while another component is loading.

Reduce distraction

Consider how the size, placement and animation of the loading indicator may distract users.

A design example of a timeline component showing one of three dots in a loading state.


Content


Be specific about the reason for delay.
Limit phrases to two or three words.
Be polite and formal.

Avoid unclear messages.
Avoid complicated sentences.
Avoid blaming the user or the application.

Load more

Load more indicates the progressive loading of content, elements or data.

A design example of the ‘Load more’ button.

When to use

  • Loading content or data in batches.
  • Allowing users to scroll through large amounts of content.

When not to use

Load more is not required if all the content can be presented at once.

Best practice


Keep in context

Position load more in close proximity to the element that is loading.

A design example of placing load more in close proximity to the element that is loading.

Write actionable labels

Use a specific action on the button label, e.g. ‘Load more’.

A design example of how to write an actionable button label.

Limit the amount

Consider the amount of content that is loaded per batch, to avoid overwhelming users.

A design example showing two screens with different amounts of content above the ‘Load more’ button.

Skeleton states

Skeleton states are simplified versions of the UI with placeholders that indicate where content will go.

A design example of a loading pattern skeleton state variant.

When to use

  • Loading a page for the first time.
  • Loading multiple components at the same time.

When not to use

  • Skeletons should not be used for loading toast notifications, overflow menus, dropdown items and modals.
  • If loading time is less than one second.

Best practice


Add motion

Use motion (shimmer effect) to decrease the perceived load time.

An example of the shimmer effect used in skeleton states.

Load elements progressively

Make elements visible as soon as they are loaded.

An example of the appearance of elements loading progressively.

Replicate the content structure

Ensure the appearance of skeleton objects matches the structure of existing content.

An example of how to match the appearance of skeleton objects with the existing content structures.

Accessibility

Shell DS components are programmatically determinable with appropriate semantic markup and are designed to meet colour contrast requirements. If you’re not using Shell DS code, you will need to cover the accessibility considerations for each component in this pattern.

Assistive technologies

Ensure screen readers can announce when loading begins or completes.

Code consideration

  • The loading component is used to notify the user that the page content is loading. W3C WAI-ARIA role="alert" and aria-live="polite", are recommended so that the screen reader can finish the current announcement, before announcing a default aria-valuetext="loading".
  • Ensure that the focus of the keyboard is shifted from the ‘Load more’ button to the first new result, each time the list grows. This allows users to tab forward easily.

Colour contrast

Ensure the colour contrast is 3:1, in accordance with WCAG guidelines.

Every effort has been made to ensure that the Shell Design System follows accessibility best practice.

The Shell DS React framework incorporates keyboard operation to support the widest variety of assistive technologies and devices. For any future frameworks other than React, accessibility will need to be reviewed.

Help us to help you by contacting the Accessibility team for support and information regarding any questions relating to accessibility.

Email the accessibility team

Related

Is this page useful for you?

Your feedback helps to improve our documentation.

Provide feedback
Edit this page in GitHub

Previous

Drawer

Next

Login