HomeBookmarks
atomloaderatomloader
atomloader

atomloader

HIby himanshutamoli24
1component3.4Kviews22bookmarks

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

Auto-indexed

atomloader contents

  • Abstract Cube Isometric Loader

    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-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:

    PropTypeDefaultDescription
    dotSizenumber5Size of each dot in pixels
    gapnumber4Spacing between dots in pixels
    speednumber1.2Duration of one full animation cycle (seconds)
    colorstring"currentColor"Active dot color (#hex, rgb(), currentColor)
    gradientGradientConfigundefinedOptional multi-stop gradient configuration
    bloombooleanfalseEnable soft ambient glow bloom filter
    opacitynumber0.08Opacity of inactive grid nodes (0 to 1)
    classNamestring""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:

    1. dot-orbit: Smooth planetary rotational flow.
    2. dot-wave: Sinusoidal amplitude wavefronts.
    3. dot-breathe: Harmonic expansion and luminescence cycles.
    4. dot-pop: Sharp staccato impulses.
    5. dot-flicker: Randomized celestial micro-sparkles.
    6. dot-leapfrog: Synchronized alternating node hops.
    7. dot-collapse: Inward gravitational singularity compression.
    8. dot-burst: Outward radial explosive shockwaves.
    9. dot-iris: Camera aperture dilation and contraction.
    10. dot-snake: Continuous serpentine corridor traversal.
    11. dot-counterflow: Opposing phase counter-rotational shear.
    12. dot-radar: 360-degree sweeping sonar sectors.
    13. dot-magnet: Elastic focal attraction and recoil.
    14. dot-dna: Intertwined helical phase oscillation.
    15. dot-vortex: Accelerating angular vortex sink.
    16. dot-stair: Quantized discrete step descents.
    17. dot-checker: Antiphase binary square wave swap.
    18. dot-glitch: High-frequency digital phase jitter.
    19. 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

    MIT © Himanshu Tamoli

    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

    Molecule UI

    by Rushil Dhinoja

    16

    components

    Browse every shadcn registry we track →

  • abstract-cube-isometric-loaderaddedSep 12, 2026
  • abstract-diamond-ring-flare-loaderaddedSep 12, 2026
  • abstract-dna-helix-dual-loaderaddedSep 12, 2026
  • abstract-flicker-constellation-loaderaddedSep 12, 2026
  • abstract-glitch-matrix-drop-loaderaddedSep 12, 2026
  • abstract-hourglass-drip-loaderaddedSep 12, 2026
  • abstract-iris-eye-dilation-loaderaddedSep 12, 2026
  • abstract-leapfrog-cluster-loaderaddedSep 12, 2026
  • abstract-lightning-strike-loaderaddedSep 12, 2026
  • abstract-lock-secure-loaderaddedSep 12, 2026
    1. Components
    2. /
    3. himanshutamoli24
    4. /
    5. atomloader

    Related libraries

    Illos

    Illos

    by Naved

    23

    components

    Prism UI

    Prism UI

    by Prism UI

    16

    components

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    coss

    coss

    by coss

    74

    components

    uiable

    uiable

    by uiable

    168

    components

    About atomloader

    atomloader is a component library on 21st.dev by himanshutamoli24 with 1 public React component. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 1 atomloader components

    • Abstract Cube Isometric Loader

    Browse all component libraries →