loader builder

browser tool to design, preview, and export animated grid loaders as react components or webm loops.

live tool

👉 loader-builder.saket.works

what it does

• visual builder: drag, pan, zoom, and adjust grid density, animation speed, and cell shapes
• react export: generates clean functional components ready to paste into your app
• video export: records webm loops directly from the canvas

getting started

setup

clone the repository and install dependencies:

git clone https://github.com/Saketdesign/Loader-Builder.git
cd Loader-Builder
npm install

local dev

start the vite development server:

npm run dev

tests & checks

# run tests
npm test

# check coverage
npm run coverage

# lint and format
npm run lint
npm run format

community & support

• live app: loader-builder.saket.works
• issue sla: bug reports and questions are answered within 24 hours.
• discussions: join our github discussions.

license

mit © 2026 Saket Joshi