Loading overview

Our loading framework assures customers that their request is in progress and can create the illusion of shorter load times across the experience—improving satisfaction.

Tenets

Video description: A lightmode card swipes right to reveal a darkmode card, which then swipes right to reveal a lightmode card, repeating the animation.

Invisible

Low to no visible latency through use of transitions to mask load times. The most effective loading state is one that appears invisible to the user by displaying relevant information quickly and avoiding transitions for content that is available.

Video description: A skeleton loader animation is shown with a shimmer flowing through the skeleton.

Lightweight

Implied speed and performance through lightweight skeleton loading and OS-specific loading indicators. Loading should feel refined and serve as a means to enhance the user's experience and communicate with them effectively.

Video description: eBay’s four core colors animate through a loading bar, with support text cycling through above.

Choreographed

Masked loading times through choreographed motion sequences. Choreography refers to timed elements consisting of type, shape, opacity, and translation working together to deliver a reassuring experience.

Framework

Invisible

Invisible uses simple transitions and smart caching to mask loading times.

Selling

Whenever possible, use page caching and other development tools to load content as quickly as possible. Here the page is already preloaded and readily available—reducing the need for loading.

Lightweight

While we aim for the fastest experience, some latency is inevitable during server requests. In these cases, we focus on Skeleton loaders and OS-specific indicators.

Search Results Page

Skeleton loaders are used to load content for pages where the overall layout is mostly known ahead of time. Skeletons provide the best experience when they mimic the final content as closely as possible. Piecemeal and/or generic skeletons should be used sparingly. Skeletons are commonly used on pages with consistent grids and components like Search, Home, and View Item.

Expressive

Our expressive loader is used to inform users during longer-than-normal wait times and as a branded element when needed.

Checkout

Loading can take longer during final purchase as the system wraps up before confirmation. The expressive loader has an option to offer states of disclosure through messaging to communicate progress to the user.