loadersz
Install

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 docsView on npm
70
motion states
2.5–3.1
kB gzip, one state
0
core dependencies

Spiraling

active
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

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.

Built for product UI

A small piece of the interface. Treated carefully.

01

Canvas, not a video

Crisp at every size, with a device-pixel-ratio cap and no asset pipeline.

02

Only ship the movement you need

Import one fixed state for a smaller bundle, or the full component when states change at runtime.

03

Motion that gets out of the way

Respects reduced motion and stops work in a hidden browser tab.

Full library or one state

Use the platform.

npm install loadersz

import 'loadersz';

// Or: import 'loadersz/racing';
Installation