loadersz: 150 Canvas Loading Animations for the Web

loadersz is a dependency-free Web Component that creates animated loading and status indicators on an HTML canvas.

The package currently includes 150+ motion states for loading, searching, typing, processing, uploading, reasoning, data activity, and other async tasks.

Features

• 150 Canvas motion states.
• Native <loadersz-loader> Web Component.
• Zero regular runtime dependencies.
• Full-library and fixed-state import entries.
• Size, speed, density, particle thickness, theme, hue, and color controls.
• React, Vue 3, Svelte 4/5, and Angular adapters.
• Reduced-motion handling and hidden-tab pausing.

How To Use It

Installation

Install loadersz from npm and import the package once in your application entry file. The import registers the <loadersz-loader> custom element.

npm install loadersz

import 'loadersz';

Basic Usage

Set an explicit size when the loader occupies reserved layout space. The state attribute selects the animation, while aria-label describes the active operation.

<loadersz-loader
  state="processing"
  size="128"
  speed="1.1"
  theme="auto"
  aria-label="Processing request"
></loadersz-loader>

All attributes and properties

• state (state name, default working): Selects one of the available motion states.
• size (number, default 96): Sets the square Canvas side in CSS pixels. Values below 16 are clamped.
• speed (number, default 1): Changes the animation timeline speed.
• density (number, default 1): Adjusts geometry detail between 0.35 and 2.
• particle-radius (number, default 1): Changes particle and line thickness between 0.5 and 2.5.
• theme (auto, dark, or light, default auto): Selects the Canvas color scheme.
• hue (number from 0 to 360): Recolors the animation with one hue.
• color (CSS color): Applies an exact CSS color and takes precedence over hue.
• paused (boolean attribute): Freezes the current frame.
• force-motion (boolean attribute): Continues animation when the system requests reduced motion.
• aria-label (string, default Loading): Labels the internal Canvas for assistive technology.

Change The Loader State At Runtime

<loadersz-loader
  id="task-loader"
  state="uploading"
  size="112"
  aria-label="Uploading file"
></loadersz-loader>
<script type="module">
  import 'loadersz';
  const loader = document.querySelector('#task-loader');
  function startProcessing() {
    loader.setAttribute('state', 'processing');
    loader.setAttribute('aria-label', 'Processing file');
  }
</script>

Import One Fixed Loader

A component that always displays one motion can import its state directly. The direct entry contains the Canvas core and that movement.

Keep the matching state name in the HTML. A fixed entry does not load another animation when the state attribute changes later.

import 'loadersz/racing';

<loadersz-loader
  state="racing"
  size="120"
  speed="1.15"
  aria-label="Loading results"
></loadersz-loader>

Customize The Loader Color

Leave hue and color unset when the selected motion should retain its original palette. hue applies one hue across visible particles. color accepts normal CSS colors and CSS custom properties.

<!-- Original palette -->
<loadersz-loader
  state="orbiting"
  size="96"
></loadersz-loader>
<!-- One hue -->
<loadersz-loader
  state="orbiting"
  size="96"
  hue="275"
></loadersz-loader>
<!-- Exact project color -->
<loadersz-loader
  state="orbiting"
  size="96"
  color="var(--brand-color)"
></loadersz-loader>

Pause And Resume Animation

paused is a boolean attribute. Remove it when the animation should resume.

const loader = document.querySelector('loadersz-loader');
// Freeze the current frame.
loader.setAttribute('paused', '');
// Resume animation.
loader.removeAttribute('paused');

Read The Available States

LOADER_STATES contains the available state names. LOADER_CATEGORIES groups them for state pickers, galleries, or settings panels.

import {
  LOADER_STATES,
  LOADER_CATEGORIES
} from 'loadersz/states';
console.log(LOADER_STATES);
for (const category of LOADER_CATEGORIES) {
  console.log(category.label, category.states);
}

Framework Integration

React and Vue wrapper props use camelCase for multi-word JavaScript properties such as ariaLabel, forceMotion, and particleRadius.

A React component can use the typed wrapper directly.

import { LoaderszLoader } from 'loadersz/react';
export function SearchStatus() {
  return (
    <LoaderszLoader
      state="searching"
      size={120}
      speed={1.1}
      color="#6d5dfc"
      ariaLabel="Searching"
    />
  );
}

Imperative Canvas API

Applications that own an existing <canvas> element can create a LoaderszLoader controller directly. Constructor options use JavaScript property names such as particleRadius, forceMotion, and ariaLabel.

<canvas id="background-task"></canvas>

import { LoaderszLoader } from 'loadersz';
const canvas = document.querySelector('#background-task');
const loader = new LoaderszLoader(canvas, {
  state: 'processing',
  size: 144,
  speed: 1.1,
  theme: 'dark',
  ariaLabel: 'Processing data'
});
// Update one or more settings.
loader.setOptions({
  state: 'reasoning',
  hue: 265
});
// Release listeners and cancel scheduled animation.
loader.destroy();

The imperative controller exposes two public lifecycle methods:

// Apply a partial options update and redraw the loader.
loader.setOptions({
  state: 'searching',
  size: 160
});
// Release browser listeners and stop frame scheduling.
loader.destroy();

Alternatives

• Material Design 3 Expressive Loading Indicator to React/Vue/Svelte/Vanilla JS
• Flexible Customizable Loading Spinners for Web Apps – SpinnerComponent

FAQs

Q: Does loadersz work with plain HTML?
A: Yes. Load the package module to register <loadersz-loader>, then place the custom element in normal HTML. Lit, Solid, and Qwik can use the native element in the same way.

Q: Should I import loadersz or a state such as loadersz/racing?
A: Import loadersz when the animation needs to change while the application runs. Import one state when the component always displays a fixed motion.

Q: Can I change a loader after it has rendered?
A: Yes. The custom element watches its public attributes and updates the Canvas when they change. The imperative controller also accepts partial updates through setOptions().

Q: How do I match a loadersz animation to my site colors?
A: Set hue for a single hue or color for an exact CSS color. The color attribute also accepts CSS custom properties such as var(--brand-color) and takes precedence over hue.