Components

Spinner

Guidelines

Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.

The waiting experience is a crucial design opportunity. Although it may not be obvious what is occurring on the back-end, we can communicate clearly to reassure the user that progress is happening.

It is best practice to use a loading spinner whenever the wait time is anticipated to be longer than three seconds.

Size

Loading spinners may be scaled down if the loading experience is contextual to a certain item on the page.

Placement

Loading spinners should appear centered over a page or content that it is loading. Please note that the top-level navigation is not included in the page loading overlay.

Usage

Button Type
Purpose

Circular

Progression

Best Practices

Do

  • Use a Spinner when a task is not immediate.

 

  • Use one Spinner at a time.

 

  • Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating.

 

  • Use a Spinner when confirming a change has been made or a task is being processed.

Don't

  • Don’t use a Spinner when performing immediate tasks.

 

  • Don't show multiple Spinners at the same time.

 

  • Don't include more than a few words when paired with a Spinner.