Dot Matrix Loaders

Lightweight, customizable CSS-animated matrix loading indicators for React. Inherits currentColor by default with full support for smooth multi-stop gradients and zero external animation libraries.

Installation & Setup

pnpm add @repo/dot-loader

import { DotLoader } from "./DotLoader";

Customization Playground

Pattern: diamond

Patterndiamond

Dot size5px

Gap4px

Speed1.2s

Color Toolkit

Bloom / Glow

Usage Code

<DotLoader />

Gallery (48)

diamond

cross

plus

square

border

cornerDots

checker

grid

spiral

maze

stairs

wave

bars

scanlines

hourglass

bowtie

butterfly

pyramid

invPyramid

orbit

ring

concentric

hexagon

octagon

atom

target

vortex

diamondRing

cube

triangle

flower

infinity

arrowUp

arrowDown

arrowLeft

arrowRight

chevron

wifi

signal

battery

lightning

lock

checkmark

heart

star

shield

sparkle