CSS Skeleton Loaders

24 CSS skeleton screens for cards, lists, articles, tables, profiles and more, with shimmer, pulse and wave animations. Show them while content loads so the layout never jumps.

Skeleton Shimmer

Three placeholder lines with a light band sweeping across them. The skeleton screen pattern: show the shape of the content before the content arrives.

skeleton · placeholder · subtle · tailwind

Skeleton Card

A card-shaped placeholder with an avatar, two lines of text and an image block, all shimmering. Drop it in wherever a feed item, product card or comment is about to appear.

skeleton · placeholder · subtle · tailwind

Avatar Loading Ring Spinner

Two arcs circle a placeholder avatar while the silhouette inside breathes, for profile pictures, chat heads and user cards that are still loading. The person glyph is drawn inline in the same SVG.

ring · spinner · skeleton

Code Lines Loader

Indented lines of code tokens type themselves in, chunk by chunk, behind a caret that blinks once the block is done. One stepped clip-path polygon does the typing, no per-line timers.

bars · skeleton

List Skeleton

Three list rows, each with an avatar, a name, a subtitle and a trailing button, pulsing one after another from top to bottom. The stagger is just an animation-delay per row.

skeleton · pulse · minimal · tailwind

Article Skeleton

A headline, byline and paragraph drawn on a single empty div: the layout is a stack of mask layers, and one gradient band slides behind it, so the shine only lands on the bones.

skeleton · gradient · minimal

Product Grid Skeleton

Three product cards with image, title, price and cart button. One mask gradient on the wrapper sweeps a single bright wave across all of them at once, instead of a shimmer per box.

skeleton · gradient

Table Skeleton

A data table placeholder with a header, checkboxes, names, status pills and right-aligned amounts. Each cell brightens on a delay of row plus column, so a diagonal wave rolls across the grid.

skeleton · pulse

Video Card Skeleton

A 16:9 thumbnail with a play glyph and duration badge, then avatar, two title lines and channel name. A diagonal highlight slides across every bone using transform only, so it stays cheap.

skeleton · gradient · icon

Chat Skeleton

Incoming and outgoing message bubbles pop in one after another from their tail corner, then clear out oldest first. Outgoing bubbles use a stronger tint so the two sides read at a glance.

skeleton · playful

Image Gallery Skeleton

A bento photo grid of tiles, each marked with a small mountain-and-sun image glyph, that twinkle on their own offsets and speeds instead of one uniform shimmer. Good for galleries and media pickers.

skeleton · pulse · icon · tailwind

Dashboard Skeleton

Three KPI cards over a chart panel. The numbers shimmer card by card while a placeholder line chart draws itself with stroke-dashoffset and its area fades in underneath, then resets.

skeleton · gradient

Form Skeleton

Two labelled inputs, a checkbox row and a full-width button, breathing with the same curve as Tailwind's animate-pulse. A caret blinks in the first field so it reads as a form, not just boxes.

skeleton · pulse · minimal · tailwind

Comment Thread Skeleton

A comment, two indented replies hanging off a curved thread line, and a second comment. The shimmer starts one step later on each comment, so it visibly flows down the thread.

skeleton · gradient

Profile Skeleton

A profile card: cover banner with a cutout for the avatar, follow button, name, handle and stats. A story-style arc circles the avatar while one skewed sheen crosses the whole card.

skeleton · ring · gradient

Product Page Skeleton

A product detail page: hero image and thumbnail strip on the left; title, star rating, price, color swatches and buy row on the right. The shimmer passes the image first, then the details.

skeleton · gradient · icon

Social Media Post Skeleton

A feed post card: avatar, name and time, two lines of text, a media block and an action bar. The media shows drifting blurred color blobs, like a BlurHash placeholder, while the text breathes.

skeleton · gradient · pulse

Notification Feed Skeleton

A live notification feed: a new row fades in at the top with an unread dot, the rest slide down a slot, and the oldest fades away. Four rows share one keyframe, offset by a quarter each.

skeleton · icon

Pricing Table Skeleton

Three plan columns with the middle one raised and badged. The columns pulse in turn and a spot of light keeps tracing the featured card's border, drawn with a conic gradient on an @property angle.

skeleton · glow · pulse

Email Inbox Skeleton

A two-pane mail client: message list on the left, reading pane on the right. The selection steps down the list and the pane shimmers again each time it lands, like opening the next email.

skeleton · gradient

Map Location Skeleton

A location card: a placeholder map with roads and a park, a pin that drops in, squashes and sends out a ripple, then address lines and a directions button. The map is all layered gradients.

skeleton · icon · physics

Streaming Response Loader

Word-shaped tokens stream in from blur, arriving in bursts like a model writing, and the newest ones flash brighter before settling. Driven by one registered @property.

ai · skeleton · text

AI Image Generation Loader

A tile of placeholder pixels where a glowing scan line sweeps down and leaves a sharp little landscape behind it, like an image model painting. The picture is pure gradients.

ai · skeleton · gradient

AI Summarizing Loader

A small document with a highlighter sweeping across its lines one at a time, as if the model is reading it, and a sparkle badge in the corner. Two synced animations, one moving down in steps.

ai · skeleton · icon

How to use these skeleton loaders

Open any loader, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no icon fonts, no image files. Each loader's classes are prefixed with its own name so several can share a page.

To change the color, set --ldr-color on the loader or any ancestor. To change the size, set --ldr-size. Everything inside scales from those two values, so a 16px inline spinner and a 96px page loader are the same snippet.

Every snippet ships with a prefers-reduced-motion rule that slows the animation for people who have asked their OS for less motion. Keep it.