Skeleton screen

A skeleton screen is a placeholder UI that appears while content is loading. Instead of a spinner or blank page, users see the outline of the interface, which signals progress and reduces perceived wait time.

What is a skeleton screen in UX design?

A skeleton screen is a loading state that displays a simplified structural outline of the interface while content is being fetched. Instead of a blank page or a spinning loading indicator, users see grey placeholder shapes that represent the layout they are about to see: bars where text will appear, rectangles where images will load, outlines where cards will populate.

The term was popularized by designer Luke Wroblewski and the pattern has become standard practice across major products including Facebook, LinkedIn, and YouTube.

Why do skeleton screens feel faster than spinners?

Research on perceived performance consistently shows that skeleton screens make load times feel shorter even when actual load times are identical to spinner-based alternatives. This happens for two reasons. First, the skeleton screen gives users something to perceive immediately, eliminating the blank void that signals nothing is happening. Second, it sets correct expectations about the content that is coming, reducing the perceptual surprise of content appearing. The brain interprets progress as faster than waiting.

When should you use a skeleton screen in UX?

Skeleton screens work best when loading times are between one and three seconds and when the content structure is predictable enough to represent in placeholder form. They are most effective for content feeds, dashboard panels, card grids, and profile pages. They are less suitable for very short loads under one second where they may flash briefly and cause more confusion than reassurance, or for content whose structure varies too much to represent meaningfully in skeleton form.

What is the difference between a skeleton screen and a spinner?

A spinner communicates that something is happening but provides no information about what is coming or how long it will take. A skeleton screen communicates structure, setting the user's mental model for the incoming content and reducing cognitive load by eliminating the moment of reorientation when content appears. For loading times over one second, skeleton screens are almost always the better choice.

Related terms

Related guides