Spinner

A spinner is an indefinite progress indicator. It is used to communicate to users that a task with an unknown duration is occurring. In essence, “Please be patient, we’re doing something”.

Design Usage

Spinners should be used for indeterminate activities that take more than 1 second. They should be positioned in proximity to the activity in progress in order to help the user understand what content is being loaded. When displaying progress for multiple related activities, try to summarize overall progress rather than the progress of each activity to avoid multiple spinners.

Use

  • When an activity is expected to take more than 1 second
  • When a page loads for the first time and all its sub components are still loading

Don’t Use

  • When an activity is expected to take less than 1 second
  • On every loading component on the page

Do

Do: Use spinners sparingly for activities requiring user attention.

Don’t

Don't: Apply spinners to every loading component as they can interrupt the user’s task and attention.

Anatomy

Spinners consist of an indicator, loading text, and a customizable overlay.

Spinner Anatomy

  1. Indicator
  2. Loading Text
  3. Overlay

Indicator

Spinners come in 4 sizes to fit in different components. Use the table to determine which spinner to use.

Size Diameter Description
Small 24px Use for smaller components like Cards and Dropdown Menus.
Medium (Default) 48px Use in the majority of components and sections.
Large 72px Use in larger areas such as Tables and Modals.
Full Page 100px Use on pages when content is being updated or loaded. This spinner prevents users from interacting with the page.

Loading Text

  • Write short and concise messages.
  • Use the default “Loading…” text unless you need to be more specific.

Overlay

  • Spinners have an overlay that covers content in the background and helps provide sufficient color contrast.
  • Match the background color of the content with the Spinner overlay by using either white or gray

Behavior

Spinners display progress by animating an indicator in a circular, clockwise direction. Spinners have a background overlay to cover content that may be loading.

Position

Spinners inside components are always centered within the component. Inline spinners are not.

Types

Default

Standard spinner used for most cases and components.

Full Page

Full-page spinners prevent user interaction with the page until an action has been completed. This is recommended only for activities taking more than 10 seconds and require the user to wait (i.e. booking a flight).

Inline

Inline spinners are used in smaller components, usually accompanied by text. Use this for items such as Dropdown and AutoComplete.

Inverted

Inverted spinners have limited use. They are displayed over dark colored backgrounds.

Sizes

Currently, there are 3 supported spinner sizes: lg, md (default), and sm.