Expressive loader

v1.0

Leveraging a branded expression, the expressive loader provides reassurance, guidance, and delight. The expressive loader is used as an alternative to the progress spinner, especially for longer loading times.

CSS
Marko
React

Considerations

Expressive

The expressive loader provides a branded experience, replacing traditional spinners to create a sense of faster loading during longer wait times.

Reassuring

To provide reassurance, the expressive loader uses support text to indicate that actions taken by users are being processed.

Quick

To portray responsive and quicker loads, the expressive loader's design utilizes visual momentum to indicate progression across page loading and user actions.

Anatomy

Support text
Bars

Usage guidelines

When to use

When navigating to a page where the visual design is mostly unknown ahead of time and a skeleton loader can’t be leveraged
For periods of longer loading where the user needs reassurance
When a user action is being processed and it is expected to perform multiple calls to load

When to consider something else

If the visual layout/format of the content being loaded is mostly known, a skeleton loader would be the better option
If content can be pre-loaded or optimized in another way, don’t default to the expressive loader because it is easier to implement

Properties

Bars only

The default expressive loader is the bars only variation. It is primarily used as a replacement for the traditional spinner, in order to help conceal loading speeds and make the experience feel visually faster.

Support text

Optional. Motion already communicates progress, so the text should add clarity, not visual noise.

When the action is known, be specific like, "We're finishing your order."

When the action is unknown or transitional, use generic copy like, "Hang tight" or "Just a moment longer."

Use sentence case
No ending punctuation
Keep to 1 line

Bars with large text

The bars with large text variation is utilized when support text is required to better inform users during longer loading periods. Common situations in which they are used include navigating to a page that is not fully known beforehand, loading a large set of data, or completing a purchase.

Bars with small text

Common actions, such as adding items to the cart, may use the variation with small text within bottom sheets if additional load time is required. Due to its smaller visual footprint, this variation is only used in bottom sheets. Text should appear at the beginning of the animation since this loader is launched by a specific user action.

Behavior

Color

Expressive loaders work across both light and dark modes.

Minimum and maximum width

Expressive loaders have a minimum width of 288px and maximum width of 343px across both native and web applications. The minimum size reflects our smallest supported breakpoint of 320px. The maximum size should be used across all other sizes including large screens. These widths are for the color bars only and do not account for the left and right padding.

Best practices

Support text

Do keep support text short and direct.

Avoid using text phrases that extend past the bars.

Do use the bars only version for quicker loading durations.

Don’t use support text when loading is expected to be faster. The exception is when using the loader in the bottom sheet for actions like “Adding item to cart”.

Do aim for a single line of support text.

Avoid long phrases when possible. Translated content can naturally become longer and is able to wrap across two lines when needed.