motion · perceived-performance
Shimmer
also called shimmer effect, loading shimmer, wave (mui)
The moving highlight that sweeps across placeholder shapes to signal that content is still on its way.
A shimmer is a band of lighter tone that crosses a set of placeholder shapes and leaves the far side, once every second or so, in the same direction every time. The shapes belong to the skeleton screen; the shimmer is only the sweep over them, which is why the two come apart cleanly. A skeleton with no shimmer is still a skeleton, and the sweep is the decoration that says the page is waiting on something rather than simply built out of grey rectangles.
The word worth separating it from is pulse, and the whole difference is travel. A pulse fades in place, has no direction and no beginning, and reads as one element being alive. A shimmer has a leading edge and a trailing one, so a single pass can cross an avatar, three lines and a thumbnail and bind them into one event. That direction is also the reason it reads as progress, and it is worth being honest that this is a fiction. The sweep knows nothing about the request. It is on a loop, it will run at exactly the same rate whether the response is 80 milliseconds away or has already failed, and a reader who takes it for motion toward something is being told a story the interface cannot back up.
Which is fine for a moment and corrosive after that. Past roughly two seconds the sweep stops meaning “soon” and starts meaning “stuck”, so a wait that runs long should be handed over to something that actually reports: a message, a progress bar, a retry. Keep the highlight quiet while it lasts. One reliable way to do that is to make the band’s brightest point the same colour as the surface behind the shapes, so the highlight only shows where a placeholder is and washes out over the gaps between them instead of streaking across the whole panel. Do not confuse the effect with a specular highlight, which is a material lighting itself: a shimmer is a status signal wearing a highlight’s clothes, and putting one on content that has already arrived just makes the page look unfinished.
It is also an animation that repeats forever beside other content, which is exactly the case WCAG’s Pause, Stop, Hide criterion is written about, and the reason prefers-reduced-motion is not optional here. The resting state has to work on its own: plain placeholder shapes, no sweep, nothing lost except the movement. That is the same discipline any looping decoration owes, and a shimmer has less excuse than most, because it was never carrying information in the first place.
Which word?
| If you want | say |
|---|---|
| the highlight travelling across a placeholder | shimmer |
| an element must signal life while nothing else happens | pulse |
| the bright spot that makes a surface read as shiny | specular highlight |
Related
See also: Skeleton screen · Reduced motion