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
Bars only
Bars with large text
Bars with small text
The expressive loader provides a branded experience, replacing traditional spinners to create a sense of faster loading during longer wait times.
To provide reassurance, the expressive loader uses support text to indicate that actions taken by users are being processed.
To portray responsive and quicker loads, the expressive loader's design utilizes visual momentum to indicate progression across page loading and user actions.
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.
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.
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.
Expressive loaders work across both light and dark modes.
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.
Do keep support text short and direct.
Avoid using text phrases that extend past the bars.
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.
Do use the standard sizes of the expressive loader on desktop.
Don’t extend the loading bars to the width of the screen on desktop or increase the size of the loader or text.
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”.
Video description: An expressive loader with support text is shown for a short duration and cut off when navigating the eBay app.
Video description: A bars only expressive loader is quickly shown when navigating the eBay app.