Playground · 12 demos
CSS Skeleton Loaders Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Skeleton Loaders collection for the gallery view with code panels.
01 Pure CSS
Classic Shimmer
A diagonal gradient slides left-to-right across each placeholder bar — the most-recognised skeleton style, used by LinkedIn, Facebook, and Slack.
Open
02 Pure CSS
Pulse Block
A simple opacity pulse — minimal, GPU-friendly, and the default style used by the Tailwind animate-pulse utility class.
Open
03 Pure CSS
Avatar Card
A circular avatar plus two text lines — the canonical user-profile placeholder. Combines a round shimmer with two narrower bars.
Open
04 Pure CSS
Image Card
A 16:9 image placeholder topped with a title and two body lines — the "feed item" template every social and blog UI ships with.
Open
05 Pure CSS
Wave Sweep
A bright highlight strip travels across the placeholder using a CSS mask — adds a glassy "light passing over" feel without changing the base colour.
Open
06 Pure CSS
Comment Thread
Three stacked rows, each a small avatar + two text lines — perfect for chat windows, comment lists, and message inbox loading states.
Open
07 Pure CSS
Article Page
A page-level skeleton: hero image, headline, byline, and four paragraph lines. The full reading-page placeholder for blog and news templates.
Open
08 Pure CSS
Table Rows
Three table rows of three cells each, with a header row above. Each cell shimmers — the canonical placeholder for data tables and dashboards.
Open
09 Pure CSS
Stat Tiles
Three KPI tiles in a row, each with a small label and a big number placeholder — the dashboard / analytics loading state.
Open
10 Pure CSS
Gradient Glow
A soft brand-coloured gradient sweeps through each bar — a more decorative shimmer that fits hero sections and marketing pages.
Open
11 Pure CSS
List with Thumbnails
A search-result / file-browser layout: square thumbnail beside two text lines, repeated three times. Mirrors media library and admin list views.
Open
12 Pure CSS
Chip Cluster
Pill-shaped chips of varying widths shimmer in a flex-wrap layout — the right placeholder for tag filters, category lists, and search facets.
Open