A skeleton screen uses gray blocks to mimic the layout of upcoming content (avatars, titles, paragraphs) with a shimmer animation. It's more effective than a spinner because it previews content structure, reducing perceived wait time.
Key implementation: Three-stop gradient linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%) creates the shimmer. Set background-size: 200% for enough displacement. Use animation-delay (0s/0.2s/0.4s) to stagger blocks into a wave. Skeleton dimensions must match final content exactly to prevent layout shift (CLS).
Common pitfalls: Size mismatch between skeleton and content causes visual jumps. Shimmer must flow left-to-right (matching reading direction). Remove animation after content swap. Match all border-radius values.
Variants: Pulse animation for dark themes, wave shimmer with cubic-bezier, content fade-in transition, progressive skeleton reveal, skeleton-to-error state.
Full copy-paste code available above. Questions? Leave a comment.
Top comments (0)