Dot Loader

A grid of ASCII characters or dots that pulses to show a loading state, built on the transitions.dev Matrix dot loader.

Base UI React Aria Radix UI

rain

scan

twinkle

orbit

pulse

rain, rounded

scan, rounded

twinkle, rounded

orbit, rounded

pulse, rounded

rain, 32 dots

scan, 32 dots

twinkle, 32 dots

orbit, 32 dots

pulse, 32 dots

Inline

Fast

16 by 16

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/dot-loader.json

Usage

import { DotLoader } from "@/components/ui/dot-loader"

<DotLoader />
<DotLoader variant="orbit" grid={10} rounded size="lg" />
<DotLoader mode="dots" variant="scan" />

Variants

Variant	Motion
`rain`	Each column falls on its own offset, like terminal rain
`scan`	A wave sweeps across the columns
`twinkle`	Cells light in a scattered order
`orbit`	A sweep travels around the centre, like a radar
`pulse`	Rings ripple out from the centre

Every grid fills the same space at each size (14, 21 or 35px), so more cells means finer dots and characters. Dots default to 32: a 6 by 6 grid with the corners trimmed. In ASCII mode each cell steps through · : + # @ and back as the pulse passes, and brightens at the peak. In dots mode the cells pulse colour.

Props

Prop	Type	Default
`variant`	`"rain" \| "scan" \| "twinkle" \| "orbit" \| "pulse"`	`"rain"`
`mode`	`"ascii" \| "dots"`	`"ascii"`
`grid`	`number`, 3 to 24	`8` for ASCII, `6` for dots (corners trimmed to 32 dots)
`rounded`	`boolean`	`false`
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`cycle`	`number` (ms)	`1400`

Cells use --muted-foreground at rest and --foreground at the peak, so they follow light, dark and custom themes. Set --matrix-base and --matrix-active to change the colours. Motion stops with prefers-reduced-motion.

Direction Drawer

On This Page

Installation Usage Variants Props