Skeleton · spinner · loading
Skeletons that shimmer or pulse in the shape of what's coming — text, avatars, cards, lists, tables — a placeholder that fades to the content, five spinners, and a loading veil that never flickers on quick loads.
Placeholder · the skeleton, then the content fades in
Presets · card · profile · table · article
Spinners · five kinds · sizes · tones
ring
dots
bars
pulse
orbit
Saving…
Loading veil · the content stays, dimmed; a quick load never flickers
Quarterly report
Updated 2 minutes ago
Revenue grew 12% on the quarter, led by Europe; churn fell to 2.1%. The new pricing lands next month.
Usage
import { signal } from "./index.js";import { Skeleton, Placeholder, Spinner, Loading } from "./components/skeleton.js"; Skeleton({ lines: 3 }) // text; variant "circle" (size) | "rect" (width, height)Skeleton({ variant: "rect", height: 160, animation: "pulse" }) // "shimmer" (default) | "pulse" | "none"Skeleton.preset("list" | "card" | "table" | "profile" | "article", { rows: 4 }) // the skeleton while loading, then the content (built only once it's ready) fades inPlaceholder({ loading: busy, skeleton: () => Skeleton.preset("list"), children: () => feed() }) Spinner({ variant: "ring" | "dots" | "bars" | "pulse" | "orbit", size: "sm", tone: "success", label: "Saving" })Loading({ loading: syncing, label: "Syncing…", children: card }) // a veil after 120 ms; content inert