Skeleton Screens 101

Summary: A skeleton screen is used as a placeholder while users wait for a page to load. This progress indicator is used for full page loads and reduces the perception of a long loading time by providing clues on how the page will ultimately look like.

A skeleton screen is a design pattern used to indicate that a page is loading while providing users with a wireframe -like visual that mimics the layout of the page. This specific type of progress indicator is used exclusively for full-page loads.

What Are the Different Types of Skeleton Screens?

There are 3 main types of skeleton screens:

These are the most common skeleton screens and look like wireframes, in which the light gray boxes represent content and images. The structure of the gray boxes mimics the structure of the final page with content. The skeleton screen helps users build a mental model of what will be on the page and even gives some clues as to the underlying information hierarchy.