AtomLoader
1

Atom Matrix Loaders

Simple, beautiful, lightweight, customizable CSS-animated loading indicators for React.

Install

pnpm dlx shadcn@latest add @atomloader/diamond-orbit-smooth-loader

Customization Playground

Dot size5px
Gap4px
Delay1.2s
Glow
import { DiamondOrbitSmoothLoader } from "@/components/ui/diamond-orbit-smooth-loader";

export default function Example() {
  return (
    <DiamondOrbitSmoothLoader/>
  );
}
Family:
dot-pulse
dot-duo-orbit
dot-trio-breathe
dot-quad-spin
dot-cross-bounce
dot-linear-cascade
dot-vertical-drip
dot-diagonal-meteor
dot-corner-ping
dot-center-burst
dot-split-merge
dot-snake-3x3
dot-flicker-sparse
dot-magnet-pull
dot-twin-helix
dot-leapfrog-line
dot-vortex-micro
dot-echo-pulse
dot-asym-corner
dot-matrix-scan
grid-full-wave
grid-checker-invert
grid-radial-ripple
grid-cascade-cols
grid-sweep-rows
grid-spiral-traverse
grid-diamond-submatrix
grid-corner-collision
grid-stagger-3x3
grid-glitch-scatter
grid-cross-scan
grid-perimeter-flow
grid-bipolar-pulse
grid-diagonal-split
grid-hollow-cross
grid-snake-zigzag
grid-radar-sweep
grid-checker-ripple
grid-interlace-cols
grid-matrix-rain
Showing 40 of 590 loaders

Comprehensive Guide to AtomLoader Registry

AtomLoader provides modern, highly customizable, and lightweight dot-matrix loading indicators designed specifically for React and Next.js applications. Perfect for dashboards, async transitions, and developer-centric aesthetic UIs.

Why Use AtomLoader?

Traditionally, embedding custom micro-animations required installing heavy canvas engines, complex WebGL wrappers, or external GIF and Lottie media assets. AtomLoader bypasses this bloat by utilizing pure CSS keyframe animations. It is fast, lightweight, and renders natively without adding massive packages to your client-side JavaScript bundles.

Registry-Based Installation

AtomLoader follows the shadcn/ui design pattern. Rather than loading an entire package, you can run a single CLI command to install only the exact components your project needs. The source code is generated and injected directly into your components folder, making styling overrides and Tailwind customization simple.

Customizing Particle Matrices

Each loader configuration acts as an interactive particle matrix. You can customize the particle count (supporting 3x3 to 9x9 grids), individual dot size, grid gaps, rotation speeds, opacity levels, and color gradients. We also support native CSS filter bloom/glow toggles to create vibrant neon or glassmorphism-friendly designs.

Agentic Web Discovery Integration

Our service is fully optimized for LLMs and AI coding assistants. Agents can read our structured registry metadata, fetch specific loader patterns directly, and automate custom UI assemblies. This helps speed up mockups and allows automated agents to seamlessly discover and configure loaders in developer workspaces.