Loading Skeleton Generator

A skeleton loader shows gray placeholder shapes that mimic the eventual layout of the content (a circle for an avatar, bars for text lines) before real data arrives — research on perceived performance generally shows this feels faster to users than a blank screen or a generic spinner, since it gives an immediate sense of the page's structure.

It's a CSS `background: linear-gradient(...)` with a `background-size` larger than the element, animated by shifting `background-position` back and forth via a `@keyframes` rule — this is a pure-CSS technique with no JavaScript required to run the animation itself.

Three common patterns: an avatar with adjacent text lines (like a comment or user card), a full card (image thumbnail, title, and body lines), and a repeating list of rows (like a contact or notification list) — each generates matching HTML structure and shared CSS classes.

Yes — the base and shimmer-highlight colors are both configurable color pickers, and since the generated CSS uses custom properties (`--skel-base`, `--skel-hi`), you can also override them per theme in your own stylesheet (e.g. inside a `.dark` selector) without regenerating the whole thing.

Up to 8 per block, each with a slightly varied width (rather than all identical full-width bars) so the placeholder looks more like natural, ragged text and less like a rigid box.