lego-rocket-loading

Lego bricks scatter, snap into a rocket, and launch off — a loading animation with start() / complete() / reset() / destroy(). Zero dependencies.

Live Demo →

Install

npm install lego-rocket-loading

Quick start

import legoRocket from 'lego-rocket-loading';

const el = document.getElementById('loader')!;
const loader = legoRocket(el, {
  scale: 1.2,
  color: '#2eafdd',
  text: [
    'Bricks on the pad…',
    'Building fuselage…',
    'Attaching fins…',
    'Fueling up…',
    'Liftoff!',
  ],
  textInterval: 1500,
});

loader.start();
// later: loader.complete(), loader.reset(), or loader.destroy();

API

legoRocket(container, options?)

| Option | Type | Default | Description | |--------|------|---------|-------------| | scale | number | 1 | Visual scale multiplier (e.g. 0.75, 1.5) | | color | string | #2eafdd | Brick accent color | | baseColor | string | #1a1a1a | Base/shadow brick color | | text | string \| string[] | Launch pad ready… | Subtitle under the scene. Array: first = idle/start, middle cycle during assembly, last on complete. | | textInterval | number | 2000 | Interval in ms for cycling middle text entries. |

Returns { start, complete, reset, setScale, destroy }.

• start() — bricks fly together and assemble into a rocket.
• complete() — rocket launches upward off screen.
• reset() — returns to idle (bricks scattered).
• setScale(n) — resize the scene; updates canvas backing store.
• destroy() — removes mounted nodes from the container.

Bundle size: ~2 kB minified + gzip (see bundlephobia).

License

MIT © Everything Frontend