Free React Loader & Spinner Components

A loading state is a small promise that the machine is working, and a generic spinner spends that moment saying nothing. These sixteen say something: a blueprint scanning itself, a plotter tracing, a kiln cone bending, a titration tinting, Morse pulses, vault dials, a film leader counting down. Each loops seamlessly, costs almost nothing to render, respects reduced motion, and carries proper status semantics so screen readers know the state too. Pick the one that fits your product's world.

16 components · MIT licensed · installable with the shadcn CLI

Diazo Develop

A blueprint develops as data arrives, latent linework surfaces in ink-density order, no sweep, bound to a 0-100 progress prop. React SVG preloader on Tailwind tokens with live percent.

Film Leader

Cinema countdown leader as a React preloader, crosshair plate, radial clock wipe, and a giant mono numeral bound to a 0-100 progress prop. Tailwind tokens, designed reduced-motion still.

Kiln Cone

Pyrometric cones slump as heat work accumulates, the firing cone's bend tracks a 0-100 progress prop until its tip touches at 100. React SVG preloader on Tailwind tokens, live percent.

Observatory

An observatory acquires its target while data loads, dome slit, telescope slew and guiding reticle converge on a seeded star, locking at 100. React SVG preloader on Tailwind tokens.

Plotter Trace

A pen plotter drafts a seeded schematic while your React app loads, stroke length bound to a 0-100 progress prop, percent stamped in a live title block. Canvas preloader in Tailwind tokens.

Swarm Count

Particle swarm preloader for React, thousands of ink specks continually re-form the live percent numeral as progress advances. Seeded, deterministic canvas themed by Tailwind tokens.

Titration

A burette meters primary drops into the flask, the meniscus falls with a 0-100 progress prop until the indicator flips at the endpoint. React SVG preloader on Tailwind tokens, live percent.

Vault Dials

Concentric instrument dials rotate and lock as loading advances, each quarter seats a ring with a spring snap until the keyway aligns at 100. React and Tailwind spectacle preloader.

Blueprint Scan

A small drafting plate under survey, a hairline sweep crosses it while corner registration ticks resolve in its wake, holds, and rescans. The sweep carries the only primary ink. SVG and motion.

Glyph Cycle

A single mono glyph slot rolls through a deterministic character set behind a mask, and when the done prop flips, it rolls once more onto a primary check and stops. A one-character machine.

Ink Dots

Three ink dots with a liquid squash-and-merge cadence, a scoped SVG goo filter fuses them as they meet, then they rebound apart. A working ellipsis, tiny and cheap. Pure CSS animation.

Ledger Fill

A mono working readout, "reconciling 047/128" with tabular digits rolling in a masked slot above a hairline progress rule. Determinate via a progress prop, or indeterminate by default.

Morse Pulse

A short word transmitted in morse, dot and dash glyphs pulse in sequence on a telegraph cadence, with the word as a mono legend beneath. Playful, legible, sub-3Hz. Pure CSS, zero deps.

Orbit Trio

Three bodies orbit a common center at staggered phases, each towing a short decaying trail, a micro ephemeris as spinner. One body burns primary. Tiny SVG, pure CSS animation, zero deps.

Percent Ring

Determinate loading ring, hairline token track, primary arc, tabular mono percent at center and a micro-label beneath. Falls back to an orbiting indeterminate segment when no progress is given.

Survey Draw

The brand as a spinner, a small blueprint frame with edge ticks and a corner registration cross that draws itself, holds, undraws, and redraws in a calm loop. SVG stroke work.