Skeleton Loading
Placeholder shapes with a shimmer animation signal that content is loading — better than a blank screen or spinner alone.
Also called: shimmer placeholder, content loader, ghost UI
How it works
Gray blocks match the layout of real content. A ::after pseudo-element sweeps a gradient across with @keyframes shimmer.
- Match skeleton dimensions to the final content to avoid layout shift
- Swap skeletons for real content once data arrives