Lesson 7 of 8
Loading skeletons
- 14 min
- 6 checks
- 3 hints
- Go to task
Goal
Reserve space for content before it arrives
Explanation
A blank screen while something loads looks broken, and a spinner on its own doesn't tell the user what's coming. A skeleton is a set of gray blocks with the shape and size of the content on its way, so the user knows what will appear and where, and the page doesn't jump when the content arrives.
A subtle shimmer sweeping across the blocks shows that loading is still in progress. You draw it on ::after as a gradient layer that slides with transform from just outside one edge of the block to just outside the other, and the block keeps it contained with position: relative and overflow: hidden. Endless motion is the first thing to turn off for anyone who asked for reduced motion.
The common mistake is animating background-position instead. It works, but it makes the browser repaint the blocks on every frame, which transform doesn't.
Your task
Give .skeleton a gray background, position: relative and overflow: hidden. Draw a gradient on .skeleton::after and move it endlessly with @keyframes that use transform, then stop the motion inside @media (prefers-reduced-motion: reduce).
Checks
6 checks- All three blocks show up in a neutral color
- Each block keeps the shimmer contained inside it
- Each block has an animated shimmer in ::after
- The shimmer moves with transform, without repainting
- The shimmer repeats without stopping
- The shimmer stops for anyone who asked for reduced motion