Loaders
React Loading Animation Components
Spinners, progress meters, and shimmering skeletons for React loading states. Each component is a single TypeScript file styled with Tailwind that you can copy-paste or install via the CLI. They keep a legible static frame under prefers-reduced-motion and forward className.
Content-shaped skeleton placeholder — matte graphite blocks crossed by a single cool-white light pass (heat-pass timing, not a conveyor). Card / text / circle / rect presets compose to prefigure any layout; @property-driven, zero dependencies, role=status + aria-busy, gentle opacity breathe under reduced motion.
Chunky 8-bit pixel loader — a hard-edged grid that fills cell-by-cell. Determinate bar (with a pulsing frontier) or an indeterminate marching band, plus a crisp bitmap-radar spinner that snaps cell-to-cell via steps(). Zero dependencies, SSR-safe, role=progressbar with aria-valuenow; collapses to a designed static frame under reduced motion.
Four machined CSS spinners — ring, dots-orbit, segmented, dual-ring — selected by variant. Conic-gradient comet head cooling to a blue-silver tail over a recessed groove; currentColor-driven, zero dependencies, lit resting frame under reduced motion.
A scroll-progress bar that reads as liquid filling a channel — a cool blue-to-white gradient with a white leading bead that glows while scrolling and settles to a solid neutral fill at 100%.
A cosmic orbital loader: electrons ride tilted elliptical rings around a white-hot, breathing nucleus, each on a seeded phase with a Keplerian-ish period and a soft comet trail. Counter-rotating planes cross like an atom; one cool accent by default, multicolor via colors. Parks at a lit static frame under reduced motion.
A staged multi-step loader: pending steps are cold gray stampings, the active step glows white under a shimmering underline, and completion quenches it into a checkmark stamped in a calm neutral — advancing on heavy mechanical detents.