Canvas loaders for the web platform

Give waiting a little character.

A compact, framework-agnostic loader component with motion you can tune to the moment.

Open playground Read the docs View on npm

150: motion states
≤ 5: kB gzip, one state
0: core dependencies

Spiraling

Built for

Astro

React

Vue

Svelte

Angular

Solid

Qwik

Preact

Nuxt

Alpine

Lit

Vite

TypeScript

Interactive playground

Tune the signal.

Every property below updates a real loader. Pick a state from the full library, then make it yours.

RacingLive preview

Canvas 2D · reduced-motion aware

Speed 1.00Density 1.00Particle radius 1.00Hue 88

Colour treatment

Native keeps each loader’s intended palette - including monochrome.

CSS colour

Accepts hex, rgb, oklch and CSS variables.

Use it anywhere

<loadersz-loader state="racing" size="96" />

API reference

All states

Find the right movement.

Click a card to load it above. Hover a card to wake up its preview.

LoadersClear progress and waiting states.

SystemsSignals, hand-offs and background work.

Data visualizationsLive metrics, charts and telemetry.

ReasoningThinking, searching and decision-making.

AtmosphereAmbient movement for quiet product moments.

Motion studiesExpressive geometry for product moments.

Implementation notes

Small runtime.
Clear boundaries.

<canvas>

Device-pixel aware

Canvas scales to the display, with device pixel ratio capped at 2×.

loadersz/racing

One state, one entry

A fixed-state import skips the runtime switcher and its unused states.

visibilitychange

Quiet in the background

Motion respects reduced-motion preferences and pauses in hidden tabs.

Full library or one state

Use the platform.

npm install loadersz

import 'loadersz';

// Or: import 'loadersz/racing';

Installation