Component Deep Dive #22: Skeleton Screen - Fake Content Is 100x Better Than Real Blank

Web Component Dictionary v2.0 - 83 Components, Bilingual, Live Preview
Live Demo | Buy on Payhip

You open a page. White screen for 3 seconds. User leaves.

You open a page. Gray blocks flash for 1 second, then real content appears. User feels "fast."

That's skeleton screens: visual placeholder > real blank.

Pure CSS Implementation (20 Lines)

css
.skeleton {
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}


Three-segment gradient + 200% width + animation = shimmer effect.

Why Skeleton Beats Spinner

Facebook internal test: skeleton makes 3s feel like 1.5s (vs 6s for white screen). Leave rate drops from 53% to 12%.

Gestalt completion: brain auto-fills incomplete shapes. Skeleton gives structure hints, brain starts understanding early.

3 Common Mistakes

1. Skeleton structure mismatching real page layout - worse than blank
2. Shimmer too fast (<1s) - visual fatigue. Best: 1.5-2s
3. Missing will-change: background-position - GPU acceleration for many elements

4 Shape Types

Text line, heading, image block, circular avatar - each only needs width, height, order-radius changes.

JS Toggle Logic

Show skeleton ? fetch data ? render content ? display: none/block toggle. Don't use opacity fade - creates flicker.

Philosophy

Users don't mind waiting. They mind not knowing what they're waiting for.

20 lines of CSS turns 3s blank into 1.5s perceived loading.

---

Bilingual version at wdsega.github.io