A spinner says "wait." A skeleton says "here's what's coming." That's why every modern app (YouTube, LinkedIn, Slack) shows shimmering gray placeholders while loading. Here's how to build one — pure CSS, no library.
💀 Try it (hit reload): https://dev48v.infy.uk/design/day16-skeleton-loader.html
Match the shape, not the content
A skeleton mirrors the final layout: an avatar circle, title bar, a few text lines, an image block — all gray. Because it reserves the same dimensions, the real content slots in with no layout shift (great for CLS).
The shimmer is one animation
Each placeholder gets an animated linear-gradient — a pale band sweeping left to right via background-position (or a translateX overlay) on a keyframe loop. That moving highlight is the whole "shimmer."
The swap
Show skeletons while loading === true; when data arrives, fade in the real content. Spinners block; skeletons set expectations, so the wait feels shorter.
One accessibility note
Mark the region aria-busy="true" while loading, and respect prefers-reduced-motion — freeze the shimmer for users who opt out.
🔨 Full build (skeleton markup → shimmer keyframes → match sizes → swap → reduced-motion) on the page: https://dev48v.infy.uk/design/day16-skeleton-loader.html
Part of DesignFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)