Before your data loads, showing a "Skeleton Screen" (shimmering boxes that match the layout of the incoming data) is the modern standard for perceived performance. Visually generate the CSS needed to create native-feeling placeholders.
Also known as a "Skeleton Screen", a shimmer placeholder is a simplified, blank version of an app's layout that is shown while data is loading. An animated CSS gradient moves across the placeholder boxes (the "shimmer"), indicating to the user that the app is actively working.
Skeleton screens drastically improve perceived performance. When a user sees a layout instantly block out the space where content will appear, the page feels faster and more stable compared to watching a full screen loading page. It prepares the user's eyes for where the text and images will eventually land.
The trick is entirely CSS-based and requires no images. We set the background to a linear gradient featuring the base color and the highlight color. We then set the background-size to 200%, and use a CSS keyframe animation to continuously slide the background-position from left to right, creating the shining illusion.
With Progressier, your web app becomes faster and more accessible.
Generate PWA See plans