Interstitial

Definition

The Interstitial with Spinner component shows a user that the system is working to perform a requested action. It can be used for full page loads or for individual components.

Common Characteristics

The Interstitial with Spinner component appears after a short delay (default 250ms). When visible, the icon rotates once every 750ms. For accessibility purposes, the spinner icon always appears with custom text describing the action in progress.

All interactions are disabled within the container in which the interstitial appears, whether an entire page, or content block, or button. The component does not indicate progress, so engineering teams must determine the appropriate timing for an error state in their application should the request fail.

States

The component includes these states: Active, TimedOut, Static. See the Design Tab above for visual design details.

Active - This state displays a spinner with custom text after a 250ms delay. The delay can be adjusted from zero to two seconds as needed.

Timed Out - This non-animated state is displayed five seconds after the active state per WCCAG 2.2.2 recommendations.

Static - This non-animated state displays an alternate icon to users who deactivate animation in their browser settings.

Variants

Full Page - By default, the full page variant is white on an 80% opacity charcoal (#4a4a4a) background, but can be chaned to charcoal on 80% white (#ffffff). The entire page is disabled until content is refreshed. Use this variant when loading or refreshing an entire page.

Content Block - By default, the content block variant is charcoal on an 80% opacity white, but can be changed to white on 80% charcoal. The content block (e.g. a card, modal , container, or page section) is disabled until content is refreshed. Use this variant when loading or refreshing content within a specified container.

The Content Block loader defaults to charcoal on 80% white, but can be changed to white on 80% charcoal. The spinner icon is 32px.

Component - This variant does not have an opacity. Use this variant with a button to indicate the system is working on the user request, or with certain inputs (dropdowns, autocompletes, etc) to indicate that content is being retrieved. The text associated with the button or input replaces the need for text within the interstitial itself.

A single full page loader is preferred over multiple content block loaders when a consistent lag is anticipated.

Usage Guidelines

Do

Build fast applications that minimize the need for the interstitial.

Adjust the 250ms delay as needed (Consult with your UX partner).

Display the appropriate interstitial variant – whether page, or content bloc, or component.

Use appropriate, on-brand labels for each state and variant.

Plan for an error state if the loading function fails.

Don't

Don't display overlapping interstitial variants simultaneously. For example, don't display a content block interstitial and a full page interstitial at the same time.

Don't use the interstitial for visual interest.

Don't forget time-out and error considerations.