CSS Skeleton Loader Generator
Generate animated skeleton loading placeholders.
Shimmering skeleton loaders
Skeleton screens — grey placeholder blocks with a shimmer — make loading feel faster than a spinner by hinting at the content to come. This generator builds animated skeleton placeholders you can drop in while data loads.
Hand-building the shimmer animation and placeholder shapes each time is repetitive. Configure the rows and radius, preview the shimmer, and copy the CSS to give your app a polished, modern loading state.
Copy-ready skeleton
The shimmer is a moving linear-gradient animated across a grey block, so it needs no image or library. Built in your browser with nothing sent to a server.
Frequently asked questions
How does the shimmer work?
A semi-transparent white gradient on a ::after pseudo-element slides from left to right across each gray bar, repeating at the speed you set.
What do the rows, radius, and speed fields change?
Rows sets how many placeholder bars the preview shows (each 10% shorter than the last), radius rounds their corners, and speed sets the shimmer duration, such as 1.2s.
How do I make skeletons accessible?
Mark the loading region with aria-busy="true" and give it a text alternative, and turn off the shimmer under prefers-reduced-motion: reduce.
Related tools
Practical utilities for front-end design and implementation work.