atomloader Components — Preview & Copy | 21st

atomloader

by himanshutamoli24

1component100views2bookmarks

Installs all 400 components. Without our CLI, run instead.

Auto-indexed

Abstract Cube Isometric Loader

That's all 1 components

About atomloader

atomloader publishes a shadcn registry at atomloader.roothq.tech, with 400 components installable through the shadcn CLI.

Components: 400
GitHub stars: 13
Last commit: Aug 23, 2026
Repository: HimanshuTamoli24/loader

Also in the atomloader registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

abstract-asym-spiral-pin-loader
abstract-battery-charge-loader
abstract-bipolar-flash-nodes-loader
abstract-bowtie-spin-loader
abstract-breathe-subtle-glow-loader
abstract-butterfly-flutter-loader
abstract-checker-matrix-alt-loader
abstract-checkmark-success-loader
abstract-concentric-iris-loader
abstract-counter-shear-loader
abstract-cube-isometric-loader
abstract-diamond-ring-flare-loader
abstract-dna-helix-dual-loader
abstract-flicker-constellation-loader
abstract-glitch-matrix-drop-loader
abstract-hourglass-drip-loader
abstract-iris-eye-dilation-loader
abstract-leapfrog-cluster-loader
abstract-lightning-strike-loader
abstract-lock-secure-loader
abstract-magnet-flux-core-loader
abstract-octagon-perimeter-loader
abstract-pulse-radiant-core-loader
abstract-quantum-lattice-loader
abstract-radar-ping-beacon-loader
abstract-radar-sweep-cone-loader
abstract-scanlines-crt-loader
abstract-shield-defense-loader
abstract-signal-strength-loader
abstract-snake-corridor-loader
abstract-sparkle-glint-loader
abstract-stair-waterfall-loader
abstract-supernova-blast-core-loader
abstract-vortex-helix-fusion-loader
abstract-wifi-broadcast-loader
atom-bohr-orbit-loader
atom-loader
atom-nuclear-fission-loader
atom-orbital-resonance-loader
atom-quantum-cloud-loader
barcode-counter-pulse-loader
barcode-equalizer-bounce-loader
barcode-vertical-scan-loader
burst-breathe-pulse-loader
burst-checker-flash-loader
burst-counter-pulse-loader
burst-dna-helix-loader
burst-flicker-sparkle-loader
burst-glitch-scatter-loader
burst-iris-dilation-loader
burst-leapfrog-cluster-loader
burst-magnet-recoil-loader
burst-quad-corner-loader
burst-radar-ignition-loader
burst-radial-nova-loader
burst-staccato-fire-loader
burst-supernova-core-loader
burst-vortex-plasma-loader
chain-link-traverse-loader
chain-tension-pulse-loader
checker-alt-pulse-loader
checker-counter-flow-loader
checker-dna-helix-loader
checker-glitch-stutter-loader
checker-radar-sweep-loader
checker-radial-ripple-loader
checker-stair-drop-loader
checker-supernova-flash-loader
checker-vortex-spin-loader
checker-wave-diagonal-loader
chevron-checker-alt-loader
chevron-dna-helix-loader
chevron-down-cascade-loader
chevron-dual-opposing-loader
chevron-flicker-spark-loader
chevron-glitch-stutter-loader
chevron-leapfrog-forward-loader
chevron-left-pulse-loader
chevron-magnet-pull-loader
chevron-orbit-loop-loader
chevron-radial-burst-loader
chevron-right-pulse-loader
chevron-supernova-loader
chevron-up-sweep-loader
chevron-vortex-spin-loader
circle-accretion-disk-loader
circle-asym-crescent-loader
circle-bipolar-flash-loader
circle-breathe-subtle-loader
circle-celestial-orbit-loader
circle-checker-orbit-loader
circle-compass-scan-loader
circle-corona-flare-loader
circle-cross-intersection-loader
circle-dna-orbit-loader
circle-dual-orbit-opposing-loader
circle-echo-rings-loader
circle-eclipse-shadow-loader
circle-flicker-corona-loader
circle-glitch-orbit-loader
circle-gravity-lens-loader
circle-harmonic-pulse-loader
circle-hourglass-orbit-loader
circle-imploding-core-loader
circle-iris-dilation-loader
circle-kepler-orbit-loader
circle-leapfrog-quad-loader
circle-magnet-flux-loader
circle-magnetosphere-drift-loader
circle-meridian-sweep-loader
circle-nova-radiance-loader
circle-orbital-handoff-loader
circle-orbit-handoff-loader
circle-orbit-smooth-loader
circle-photon-sphere-loader
circle-quad-quadrant-loader
circle-radar-blip-loader
circle-radial-burst-loader
circle-radial-quasar-loader
circle-snake-tail-loader
circle-solar-prominence-loader
circle-split-arcs-loader
circle-stair-spiral-loader
circle-stellar-meridian-loader
circle-supernova-blast-loader
circle-triple-concentric-loader
circle-triple-pulse-loader
circle-void-eclipse-loader
circle-vortex-drain-loader
circle-wave-crest-loader
compass-cardinal-pulse-loader
compass-flicker-stars-loader
compass-glitch-lost-loader
compass-magnet-drift-loader
compass-needle-spin-loader
compass-stair-quadrant-loader
compass-supernova-true-loader
compass-vortex-heading-loader
cross-breathe-glow-loader
cross-checker-alternate-loader
cross-flicker-spark-loader
cross-glitch-stutter-loader
cross-imploding-arms-loader
cross-laser-sweep-loader
cross-leapfrog-step-loader
cross-quad-orbit-loader
cross-radar-sweep-loader
cross-radial-burst-loader
cross-stair-cascade-loader
diamond-bipolar-flash-loader
diamond-checker-alt-loader
diamond-collapse-core-loader
diamond-counter-flow-loader
diamond-dna-helix-loader
diamond-dual-chase-loader
diamond-flicker-gem-loader
diamond-glitch-stutter-loader
diamond-iris-dilation-loader
diamond-leapfrog-hops-loader
diamond-magnet-pulse-loader
diamond-orbit-smooth-loader
diamond-radar-sweep-loader
diamond-radial-burst-loader
diamond-snake-track-loader
diamond-solid-breathe-loader
diamond-stair-cascade-loader
diamond-supernova-loader
diamond-vortex-spin-loader
diamond-wave-ripple-loader
dna-base-pair-split-loader
dna-double-helix-loader
dna-vortex-replication-loader
dot-asym-corner-loader
dot-center-burst-loader
dot-corner-ping-loader
dot-cross-bounce-loader
dot-diagonal-meteor-loader
dot-duo-orbit-loader
dot-echo-pulse-loader
dot-flicker-sparse-loader
dot-leapfrog-line-loader
dot-linear-cascade-loader
dot-magnet-pull-loader
dot-matrix-scan-loader
dot-pulse-loader
dot-quad-spin-loader
dot-snake-3x3-loader
dot-split-merge-loader
dot-trio-breathe-loader
dot-twin-helix-loader
dot-vertical-drip-loader
dot-vortex-micro-loader
flower-counter-spin-loader
flower-flicker-dew-loader
flower-glitch-stutter-loader
flower-iris-dilation-loader
flower-orbit-petal-loader
flower-petal-bloom-loader
flower-radar-sweep-loader
flower-solid-breathe-loader
flower-stair-cascade-loader
flower-vortex-swirl-loader
gear-cog-rotation-loader
gear-dual-interlock-loader
gear-stair-advance-loader
gear-vortex-torque-loader
grid-bipolar-pulse-loader
grid-cascade-cols-loader
grid-checker-invert-loader
grid-checker-ripple-loader
grid-corner-collision-loader
grid-cross-scan-loader
grid-diagonal-split-loader
grid-diamond-submatrix-loader
grid-full-wave-loader
grid-glitch-scatter-loader
grid-hollow-cross-loader
grid-interlace-cols-loader
grid-matrix-rain-loader
grid-perimeter-flow-loader
grid-radar-sweep-loader
grid-radial-ripple-loader
grid-snake-zigzag-loader
grid-spiral-traverse-loader
grid-stagger-3x3-loader
grid-sweep-rows-loader
heart-beat-pulse-loader
heart-counter-flow-loader
heart-dna-helix-loader
heart-flicker-spark-loader
heart-perimeter-orbit-loader
heart-radial-burst-loader
heart-solid-breathe-loader
heart-stair-cascade-loader
heart-supernova-glow-loader
heart-vortex-spin-loader
hex-asym-cut-loader
hex-checker-phase-loader
hex-column-scan-loader
hex-counter-flow-loader
hex-diagonal-meteor-loader
hex-dna-interlace-loader
hex-dual-chase-loader
hex-flicker-sparkle-loader
hex-glitch-scatter-loader
hex-implosion-core-loader
hex-iris-dilation-loader
hex-leapfrog-hops-loader
hex-magnet-pull-loader
hex-perimeter-orbit-loader
hex-pulse-ring-loader
hex-radar-scan-loader
hex-radial-burst-loader
hex-solid-breathe-loader
hex-spiral-inward-loader
hex-stair-descent-loader
hex-supernova-loader
hex-triple-orbit-loader
hex-vertex-pulse-loader
hex-vortex-swirl-loader
hex-wave-traverse-loader
infinity-bipolar-flash-loader
infinity-breathe-subtle-loader
infinity-checker-alt-loader
infinity-counter-spin-loader
infinity-dna-helix-loader
infinity-dual-chase-loader
infinity-figure-eight-loader
infinity-flicker-dust-loader
infinity-glitch-stutter-loader
infinity-leapfrog-crossover-loader
infinity-radar-sweep-loader
infinity-stair-drop-loader
infinity-supernova-flare-loader
infinity-vortex-twist-loader
infinity-wave-flow-loader
lens-aperture-dilation-loader
lens-chromatic-stutter-loader
lens-flicker-reflection-loader
lens-focal-zoom-loader
lens-radar-sweep-loader
lens-supernova-flare-loader
matrix-bipolar-counter-loader
matrix-breathe-subtle-loader
matrix-checker-polarity-loader
matrix-diagonal-cascade-loader
matrix-digital-rain-loader
matrix-dna-interlaced-loader
matrix-flicker-static-loader
matrix-laser-scan-loader
matrix-leapfrog-swap-loader
matrix-magnet-collapse-loader
matrix-quantum-stutter-loader
matrix-radar-sector-loader
matrix-snake-traversal-loader
matrix-supernova-flash-loader
matrix-vortex-core-loader
maze-flicker-torch-loader
maze-glitch-trap-loader
maze-path-traverse-loader
maze-radar-scan-loader
maze-stair-cascade-loader
maze-supernova-escape-loader
maze-vortex-solve-loader
maze-wall-pulse-loader
orbit-binary-stars-loader
orbit-bipolar-flash-loader
orbit-breathe-harmony-loader
orbit-checker-polarity-loader
orbit-collapse-blackhole-loader
orbit-counter-rotational-loader
orbit-dna-helix-loader
orbit-flicker-dust-loader
orbit-glitch-drift-loader
orbit-leapfrog-pair-loader
orbit-magnet-flux-loader
orbit-quad-ring-loader
orbit-radar-sweep-loader
orbit-radial-burst-loader
orbit-single-satellite-loader
orbit-snake-comet-loader
orbit-stair-quantum-loader
orbit-supernova-flare-loader
orbit-triple-system-loader
orbit-vortex-cyclone-loader
pentagon-altitude-wave-loader
pentagon-collapse-core-loader
pentagon-column-rake-loader
pentagon-core-spokes-loader
pentagon-dna-helix-loader
pentagon-dual-counterflow-loader
pentagon-glitch-stutter-loader
pentagon-harmonic-breathe-loader
pentagon-iris-dilation-loader
pentagon-leapfrog-handoff-loader
pentagon-magnet-pulse-loader
pentagon-orbit-trace-loader
pentagon-radar-sector-loader
pentagon-radial-burst-loader
pentagon-serpent-zip-loader
pentagon-solar-shield-loader
pentagon-stair-cascade-loader
pentagon-star-core-loader
pentagon-supernova-flare-loader
pentagon-vertex-chase-loader
plus-diagonal-wave-loader
plus-dual-chase-loader
plus-iris-expansion-loader
plus-magnet-pulse-loader
prism-dispersion-burst-loader
prism-refraction-wave-loader
prism-vortex-split-loader
pyramid-apex-cascade-loader
pyramid-bipolar-flash-loader
pyramid-checker-alt-loader
pyramid-counter-slide-loader
pyramid-dna-helix-loader
pyramid-flicker-flame-loader
pyramid-glitch-stutter-loader
pyramid-inverted-funnel-loader
pyramid-leapfrog-tiers-loader
pyramid-magnet-core-loader
pyramid-radial-burst-loader
pyramid-solid-breathe-loader
pyramid-stair-steps-loader
pyramid-supernova-loader
pyramid-vortex-drain-loader
radar-blip-pulse-loader
radar-counter-sweep-loader
radar-crosshair-scan-loader
radar-dual-beam-loader
radar-flicker-beacon-loader
radar-glitch-interference-loader
radar-stair-sector-loader
radar-supernova-burst-loader
radar-sweep-classic-loader
radar-vortex-swirl-loader
ring-bipolar-flash-loader
ring-breathe-glow-loader
ring-checker-alt-loader
ring-collapse-center-loader
ring-counter-spin-loader
ring-dna-twins-loader
ring-dual-chase-loader
ring-flicker-spark-loader
ring-glitch-stutter-loader
ring-iris-expand-loader
ring-leapfrog-step-loader
ring-magnet-attract-loader
ring-orbit-single-loader
ring-quad-sync-loader
ring-radar-sweep-loader
ring-snake-segment-loader
ring-staccato-pulse-loader
ring-supernova-bloom-loader
ring-vortex-accelerate-loader
ring-wave-ripple-loader
ripple-checker-alt-loader
ripple-concentric-in-loader
ripple-concentric-out-loader

From the atomloader readme

⚡ AtomLoader

Lightweight, customizable CSS-animated dot-matrix loading indicators for React and Next.js.

500+ handcrafted, visually distinct geometric loading animations built with pure CSS grid and keyframes — zero heavy dependencies, SSR-safe, fully accessible, and styled with modern design tokens.

✨ Features

500+ Genuinely Unique Loaders: Handcrafted patterns across 50 geometric families (Dot, Grid, Square, Circle, Ring, Hex, Triangle, Diamond, Star, Cross, Wave, Orbit, Spiral, Ripple, Burst, Matrix, DNA, Vortex, and Abstract).
Pure CSS Animations: Powered exclusively by CSS Grid and keyframe transforms. No GSAP, no Framer Motion, no Canvas, no WebGL.
shadcn CLI Native: Install any loader directly into your project as zero-dependency React components using the official shadcn CLI.
Ultra Scalable: Scales smoothly from 16px, 20px, 24px micro-indicators up to 64px+ hero loaders.
Multi-Stop Gradients & Bloom: Built-in linear and multi-stop gradient color interpolation with optional ambient bloom glow.
Accessible & SSR Safe: Includes @media (prefers-reduced-motion: reduce) motion dampening and full hydration safety.
TypeScript First: Strict types for pattern names, gradient configurations, and component props.

📦 Quick Installation

Option 1: Add via shadcn CLI (Recommended)

AtomLoader distributes components as direct shadcn UI registry items.

1. Configure the `@atomloader` registry namespace (once):

# pnpm
pnpm dlx shadcn@latest registry add "@atomloader=https://atomloader.roothq.tech/r/{name}.json"

# npm
npx shadcn@latest registry add "@atomloader=https://atomloader.roothq.tech/r/{name}.json"

# bun
bunx --bun shadcn@latest registry add "@atomloader=https://atomloader.roothq.tech/r/{name}.json"

2. Install any specific loader:

# Install individual standalone component
pnpm dlx shadcn@latest add @atomloader/diamond-orbit-smooth-loader
# or
npx shadcn@latest add @atomloader/hex-perimeter-orbit-loader
# or universal catalog component
npx shadcn@latest add @atomloader/atom-loader

🚀 Usage

1. Standalone Loader Component

import { DiamondOrbitSmoothLoader } from "@/components/ui/diamond-orbit-smooth-loader";

export default function LoadingPage() {
  return (
    
      
    
  );
}

2. Multi-Stop Gradient Customization

import { HexPerimeterOrbitLoader } from "@/components/ui/hex-perimeter-orbit-loader";

export default function GradientLoader() {
  return (
    
  );
}

3. Universal AtomLoader Component

import { AtomLoader } from "@/components/ui/atom-loader";

export default function UniversalLoader() {
  return (
    
  );
}

⚙️ Component API

All loaders accept the following props:

Prop	Type	Default	Description
`dotSize`	`number`	`5`	Size of each dot in pixels
`gap`	`number`	`4`	Spacing between dots in pixels
`speed`	`number`	`1.2`	Duration of one full animation cycle (seconds)
`color`	`string`	`"currentColor"`	Active dot color (`#hex`, `rgb()`, `currentColor`)
`gradient`	`GradientConfig`	`undefined`	Optional multi-stop gradient configuration
`bloom`	`boolean`	`false`	Enable soft ambient glow bloom filter
`opacity`	`number`	`0.08`	Opacity of inactive grid nodes (0 to 1)
`className`	`string`	`""`	Additional custom CSS class names

`GradientConfig`

interface GradientConfig {
  from: string;
  via?: string;
  to: string;
  direction?: "diagonal" | "horizontal" | "vertical";
}

🧬 Motion Engine Architecture

AtomLoader operates on 19 discrete CSS animation keyframe models mapped dynamically to matrix nodes:

dot-orbit: Smooth planetary rotational flow.
dot-wave: Sinusoidal amplitude wavefronts.
dot-breathe: Harmonic expansion and luminescence cycles.
dot-pop: Sharp staccato impulses.
dot-flicker: Randomized celestial micro-sparkles.
dot-leapfrog: Synchronized alternating node hops.
dot-collapse: Inward gravitational singularity compression.
dot-burst: Outward radial explosive shockwaves.
dot-iris: Camera aperture dilation and contraction.
dot-snake: Continuous serpentine corridor traversal.
dot-counterflow: Opposing phase counter-rotational shear.
dot-radar: 360-degree sweeping sonar sectors.
dot-magnet: Elastic focal attraction and recoil.
dot-dna: Intertwined helical phase oscillation.
dot-vortex: Accelerating angular vortex sink.
dot-stair: Quantized discrete step descents.
dot-checker: Antiphase binary square wave swap.
dot-glitch: High-frequency digital phase jitter.
dot-scan: Linear raster laser scanlines.

🛠 Local Development

# Clone the repository
git clone https://github.com/HimanshuTamoli24/loader.git
cd loader

# Install dependencies
pnpm install

# Generate loaders & build registry
pnpm run build:registry

# Start the development server
pnpm dev

📄 License

Read the rest on GitHub →

What atomloader shipped recently

Every appearance and removal our crawl has seen in the registry index.

abstract-asym-spiral-pin-loaderaddedSep 12, 2026
abstract-battery-charge-loaderaddedSep 12, 2026
abstract-bipolar-flash-nodes-loaderaddedSep 12, 2026
abstract-bowtie-spin-loaderaddedSep 12, 2026
abstract-breathe-subtle-glow-loaderaddedSep 12, 2026
abstract-butterfly-flutter-loaderaddedSep 12, 2026
abstract-checker-matrix-alt-loaderaddedSep 12, 2026
abstract-checkmark-success-loaderaddedSep 12, 2026
abstract-concentric-iris-loaderaddedSep 12, 2026
abstract-counter-shear-loaderaddedSep 12, 2026

Registries like atomloader

Molecule UI

by Rushil Dhinoja

components

Browse every shadcn registry we track →

atomloader contents

Abstract Cube Isometric Loader

About atomloader

Also in the atomloader registry

abstract-asym-spiral-pin-loader

abstract-battery-charge-loader

abstract-bipolar-flash-nodes-loader

abstract-bowtie-spin-loader

abstract-breathe-subtle-glow-loader

abstract-butterfly-flutter-loader

abstract-checker-matrix-alt-loader

abstract-checkmark-success-loader

abstract-concentric-iris-loader

abstract-counter-shear-loader

abstract-cube-isometric-loader

abstract-diamond-ring-flare-loader

abstract-dna-helix-dual-loader

abstract-flicker-constellation-loader

abstract-glitch-matrix-drop-loader

abstract-hourglass-drip-loader

abstract-iris-eye-dilation-loader

abstract-leapfrog-cluster-loader

abstract-lightning-strike-loader

abstract-lock-secure-loader

abstract-magnet-flux-core-loader

abstract-octagon-perimeter-loader

abstract-pulse-radiant-core-loader

abstract-quantum-lattice-loader

abstract-radar-ping-beacon-loader

abstract-radar-sweep-cone-loader

abstract-scanlines-crt-loader

abstract-shield-defense-loader

abstract-signal-strength-loader

abstract-snake-corridor-loader

abstract-sparkle-glint-loader

abstract-stair-waterfall-loader

abstract-supernova-blast-core-loader

abstract-vortex-helix-fusion-loader

abstract-wifi-broadcast-loader

atom-bohr-orbit-loader

atom-loader

atom-nuclear-fission-loader

atom-orbital-resonance-loader

atom-quantum-cloud-loader

barcode-counter-pulse-loader

barcode-equalizer-bounce-loader

barcode-vertical-scan-loader

burst-breathe-pulse-loader

burst-checker-flash-loader

burst-counter-pulse-loader

burst-dna-helix-loader

burst-flicker-sparkle-loader

burst-glitch-scatter-loader

burst-iris-dilation-loader

burst-leapfrog-cluster-loader

burst-magnet-recoil-loader

burst-quad-corner-loader

burst-radar-ignition-loader

burst-radial-nova-loader

burst-staccato-fire-loader

burst-supernova-core-loader

burst-vortex-plasma-loader

chain-link-traverse-loader

chain-tension-pulse-loader

checker-alt-pulse-loader

checker-counter-flow-loader

checker-dna-helix-loader

checker-glitch-stutter-loader

checker-radar-sweep-loader

checker-radial-ripple-loader

checker-stair-drop-loader

checker-supernova-flash-loader

checker-vortex-spin-loader

checker-wave-diagonal-loader

chevron-checker-alt-loader

chevron-dna-helix-loader

chevron-down-cascade-loader

chevron-dual-opposing-loader

chevron-flicker-spark-loader

chevron-glitch-stutter-loader