Skeleton loading shows the page structure during loading. Better than a spinner. Used by Facebook, LinkedIn, YouTube.
Skeleton vs spinner
A spinner says \"loading\". A skeleton says \"this is what's coming\". -30% frustration.
How it works
Gray blocks shaped like content. Shimmer animation. Fade when real content loads.
Design
Gray #e0e0e0, border-radius 4-8px. Shape matches content.
CSS
linear-gradient, shimmer animation at 1.5s.
Types
Card, list, article, avatar, button skeletons.
When to use
Initial load, list updates, lazy load, AJAX.
When not to
Under 500ms. Simple form submits. Errors.
Perceived vs real
Real time doesn't change. Perceived -30-40%.
Animation
1-2 second cycle. 1.5s standard.
Skeleton vs Optimistic UI
Skeleton is loading. Optimistic UI is instant action feedback.
Tools
react-loading-skeleton, vue-content-loader, pure CSS.
Mobile
Especially important. Use requestAnimationFrame.
A/B testing
Skeleton -10-20% bounce vs spinner.
Mistakes
Wrong shape. Too long. Jerky animation.
Accessibility
aria-hidden, aria-live=\"polite\".
Sayt.uz
Skeletons in blog, products, search. 1.5s shimmer. Mobile bounce -6% (18% โ 12%).