CSS

CSS Skeleton Loader Generator

A shimmering placeholder layout, for content that has not loaded yet -- text block, card, profile, list or table row. Shimmer or pulse animation, direction, colours, adjustable line count, presets, randomize, and export to CSS, Tailwind, SCSS or React.

What this tool does

Builds a skeleton loading placeholder — the shimmering grey blocks shown while real content is still loading — for five common content shapes, all sharing one reusable .skeleton class rather than needing separate CSS per layout.

Five layout shapes

Text block (a stack of lines with the last one shorter, like real paragraph text), Card (an image block plus two text lines), Profile (a circular avatar next to name/detail lines), List (rows of an avatar plus a text line), and Table Row (multiple equal- height columns per row) — each generates the right markup structure for that specific UI pattern.

Shimmer vs pulse animation

Shimmer sweeps a lighter band across the block in a chosen direction (left-to-right, right-to-left, or diagonal) — the classic loading-skeleton look. Pulse instead fades the whole block's opacity in and out, a simpler alternative when a moving sweep isn't wanted.

Colours, speed and line count

Base colour, shimmer colour and its opacity (for shimmer mode), animation speed, corner radius, and the number of lines or rows are all independently adjustable, so the skeleton can match both a brand's colours and how much content it stands in for.

Presets and randomizing

Six presets — Text Block, Card, Profile, List, Table Row, and Reset — set the layout and animation together, plus a randomize button for quick exploration.

Getting it out

Export as HTML + CSS ready to drop in directly, a Tailwind- oriented note (Tailwind has no built-in shimmer utility), SCSS, or a React component with the CSS supplied separately, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The skeleton layout is built and animated entirely in the browser -- nothing is sent to a server.

What's the difference between shimmer and pulse?

Shimmer sweeps a lighter band across the block in a chosen direction, the classic loading-skeleton look. Pulse instead fades the whole block's opacity in and out -- a simpler alternative with no directional sweep.

What layouts are available?

Text Block (stacked lines, last one shorter), Card (image block plus text lines), Profile (circular avatar plus name/detail lines), List (rows of avatar plus text), and Table Row (multiple equal-height columns per row).

Can I change how many lines or rows are shown?

Yes -- a line/row count control adjusts the number of placeholder lines (for Text/Profile) or rows (for List/Table), so the skeleton can match how much real content it stands in for.

Does every layout share the same CSS class?

Yes -- all five layouts use one reusable .skeleton class for the shimmer or pulse styling, with only the markup structure differing between layouts.

What export formats are available?

HTML + CSS ready to use directly, a Tailwind-oriented export with a config note, SCSS, or a React component with the CSS supplied separately -- selectable from a dropdown next to the code output.