Skeleton Loader
also known asskeleton screen · shimmer loader · placeholder UI · ghost UI
A placeholder UI that mimics the shape of upcoming content, usually with a shimmering animation, while real data loads.
A skeleton loader is a low-contrast wireframe of the content that's loading — gray rectangles where text will appear, circles where avatars will be, blocks where images will sit. A subtle left-to-right shimmer animation signals that the page is alive and working, not frozen.
Skeletons replaced spinners in modern UIs because they reduce perceived load time. Users see structure immediately and can mentally prepare for what's coming, instead of staring at a centered spinner and wondering what will arrive.
The key craft detail: skeletons should match the real content's layout exactly, so the page doesn't visibly reflow when data resolves. The shimmer should be subtle (low opacity, slow speed) — too bright reads as loading-bar urgency rather than ambient progress.
- Initial page load when fetching data takes >300ms
- List or feed UIs where multiple items load at once
- Image-heavy layouts where you want to reserve space
- Sub-300ms loads — the skeleton flashes and feels slower than no loader
- Single-element actions — use an inline spinner on the button instead
- +Match the skeleton's layout to the real content exactly
- +Use a slow shimmer (1.4–2s loop) at low contrast
- +Show 3–5 skeleton items max in a list — diminishing returns beyond that
- −Don't animate the shimmer too fast — it reads as urgent / broken
- −Don't use skeleton for actions that complete instantly
- −Don't combine with a spinner on the same view
People also ask
Skeleton loader vs spinner — which is better?
Skeletons feel faster because users see structure immediately and can anticipate the content. Spinners are better for very short, indeterminate operations (button click, form submit) where layout isn't changing.