AtomLoader

Overview

AtomLoader is a registry of more than 500 minimal dot-matrix loading indicators for React and Next.js; the registry currently lists 590 loaders plus a base atom loader. Each loader is animated with pure CSS keyframes, so it adds no canvas engine, WebGL wrapper, GIF or Lottie asset to the bundle.

Loaders install one at a time with the shadcn CLI, and the generated source goes straight into the components folder for Tailwind overrides. The site includes a customization playground for tuning a pattern's dot size, gap, delay and color before copying the code or an AI agent prompt. Loaders are grouped into families such as dot, grid and square patterns.

Features

• 590 loaders: Dot, grid and square families with patterns like pulse, orbit, helix, radar sweep, matrix rain and spiral traverse.
• Pure CSS animation: Keyframe-driven loaders with no runtime dependencies.
• Customization playground: Adjust dot size, gap, delay and color, with solid and glow color modes.
• Configurable matrices: Particle grids from 3x3 to 9x9, plus speed, opacity and gradient controls.
• Glow effects: Native CSS filter bloom for neon-style loaders.
• Agent-friendly: Structured registry metadata and copyable AI agent prompts.
• Light and dark mode: Loaders use currentColor and adapt to the theme.

Tech stack

• React, Next.js
• Tailwind CSS
• CSS keyframe animations

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @atomloader/component-name