Skeleton Screen
Skeleton Screen
A temporary gray placeholder layout shown on screen while data loads in a website or app.
In Simple Terms
A skeleton screen is a mechanism that displays a placeholder layout on screen while an app or website waits for data to load. When you open a video app or social media app, gray rectangular blocks appear first where text and images will go, and the real content pops in shortly after. This makes it visually clear that something is loading, instead of leaving you staring at a blank white screen.
Behind the Name
The name comes from "skeleton" — the bare bones or frame of something — because this design shows only the skeletal outline of a page's layout, rendered in pale gray shapes, while the real content is still loading. It's also sometimes called a "skeleton loader."
Take a Closer Look!
A skeleton screen is a temporary design shown on a website or app that looks like the bare frame of the page while data is still loading.
When a screen stays completely blank for a while, people tend to worry that something isn't working.
Showing this placeholder frame instead tells you that the system is actively loading data right now.
In simple terms, it acts like a "rough draft" of the information that's about to appear.
For example, a long thin gray bar might mark where an article title will go, and a larger gray block might mark where a photo will appear — blocks arranged to match the page's actual layout.
This lets you see in advance what kind of information will appear and where, which is said to make the wait feel shorter.
Many smartphone apps and websites now use this design instead of a spinning loading icon in the center of the screen.
By visually building up the screen piece by piece, it softens the feeling of just being made to wait.