Atom Matrix Loaders
Simple, beautiful, lightweight, customizable CSS-animated loading indicators for React.
Install
pnpm dlx shadcn@latest add @atomloader/diamond-orbit-smooth-loaderCustomization 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