Skeleton loaders

Shimmering placeholders shaped like the content that replaces them.

A skeleton is a promise about layout: the grey blocks should sit exactly where the real text and images will, so nothing jumps when the data lands. The shimmer is a moving gradient, not an opacity pulse, because a sweep reads as "working" while a fade reads as "broken". Match the number of lines to the typical result, not the longest one.

31 matching31 effectsFree to copy

Norm shimmering text placeholder blocks on a slate surface.

Norm shimmering card placeholder blocks on a slate surface.

Blue-tinted skeleton bars that pulse opacity in sequence.

Skeleton bars with an ocean gradient wave sweeping across.

Loading avatar with a rotating ocean conic gradient + text lines.

Full card placeholder — avatar, heading and three text lines — sweeping blue in one shared animation.

Media placeholder with a single ocean highlight crossing it — transform-only, so it stays on the compositor.

Three placeholder rows — avatar, two text lines, trailing pill — sweeping ocean in sequence.

Three placeholder rows whose sweeps are staggered by a tenth of a second, so the list reads as loading top-down instead of pulsing as one block.

Thumbnail, headline and three ragged text lines, sized to the article card it stands in for so nothing jumps when the content lands.

Placeholder shaped like the chart it stands in for — title, ragged bars and an axis — so the panel does not resize when real data arrives.

Cover, overlapping avatar, name lines and a stat row, staggered top-down so the header reads as filling in rather than flashing at once.

Mixed-span grid placeholder, the wide cells breaking the rhythm so the loading state reads as a real masonry rather than a uniform block.

Comment placeholders with a nested reply indented behind a rule, so the shape of the conversation is visible before any text arrives.

Placeholder shaped to the form it precedes — short label blocks over taller field blocks, a split row, and a submit bar carrying a warmer sweep than the fields above it.

Three-column board placeholder with uneven card heights and a per-column sweep delay, so the loading state carries the same ragged rhythm the real board will.

Loading state for a map view — tile grid, two roads at an angle and pulsing pin stubs — with the result card below carrying the usual sweep.

Placeholder holding a 16:9 stage with an inert play glyph over a scrubber and two metadata lines, so the layout does not shift when the real player mounts.

Mini editor placeholder with indented shimmering token bars, keyword bars tinted indigo.

Messaging placeholder with alternating grey and sky-tinted chat bubbles that shimmer in sequence.

Three KPI tile placeholders, each with a label bar, emerald-tinted number bar and a tiny sparkline.

Now-playing card placeholder with pink-tinted album art, title bars, a seek bar and shimmering control dots.

Card placeholder filled with slowly marching teal barber-pole stripes instead of a shimmer sweep.

Order summary placeholder with three charge rows, a dashed rule, a heavier total line and a full-width action block.

Showing 24 of 31. Search the rest →

Questions about skeleton loaders

Skeleton or spinner?
Skeleton when you know the shape of what is coming — a list, a card, an article. Spinner when you do not, or when the wait is for an action rather than for content. A skeleton that guesses the layout wrong is worse than a spinner, because it moves twice.
Why is my shimmer invisible in dark mode?
The sweep is usually a white gradient at low opacity, which disappears against a dark placeholder. These use a translucent highlight over the surface token rather than a fixed colour, so they keep contrast in both themes.
Are these skeleton loaders free to use?
All 31 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Copy the CSS and the markup from the artifact's page — there is nothing to install, no runtime and no build step. The CLI (`npx hoverlab add`) is there for the component tiers above these, where a file gets written rather than pasted.