Overview

Skeleton (lazyload)

Skeleton loader is an animated state that visually indicates the component or page is loading. It should only appear for a few seconds, until actual content populates the page.

Skeleton (lazyload)

Usage

When to use
Use skeleton loaders to represent the loading process of content, such as avatars, lists, cards, tables, and forms. As a page loads, the skeleton loader sets an expectation of what's to come in terms of layout, shortens the perceived load time, and in turn improves user satisfaction.
Full-page skeleton loader
Full-page skeleton loaders feature blocks of content that visually communicates the page structure to the user.
Common usage are on landing pages, listing pages, and app dashboards.
Display text skeleton loader
You can use a skeleton loader to display a specific line of text that takes time to dynamically retrieve.
Examples of usage include dashboard numbers, investment portfolio numbers, and membership points.
How best to use
Progressive loading
When implementing a full-page skeleton loader, we commonly apply progressive loading. The user sees the skeleton first, with details of individual sections appearing gradually — usually starting with text, then images, and from top to bottom.
Do
Visually match the underlying page layout. But it's not necessary to perfectly match the actual content size and spacing.
Do
Use skeleton loaders to represent dynamic content and use actual copy for static content.
Don't
Don't use it in combination with an activity indicator.
When not to use
Don't use it for system menus, dropdowns, snackbars, or dialogs
Content for these components should either be consistently available or already loaded when users interact with them.
Don't use it when indicators are needed for activity or progress feedback
Don't use a skeleton loader when users will benefit from a clear indication of the progress, such as during data imports or file downloads.
Component comparison table
Component
Usage
Best used for
Display duration
Activity indicator
Use it to show that the system is processing a user action, such as a form submission, or when something is loading.
Data retrieval, data submission, loading, etc.
Usually between 2 to 10 seconds depending on loading speed.
Skeleton loader
Always use it to represent initial page load, except when content can't be displayed with a skeleton loader, such as a chart, then use the activity indicator.
Loading of content.
Anything from 0 to 10 seconds depending on loading speed.
Progress bar
Use it to tell users how far along they are in a process, but don't use it to represent loading.
Usually for a user task or challenge.
Persistently displayed based on the user's progression towards completion.