Dot Grid Loader

A 3×3 grid of animated dots, in four rhythms. Each cell only gets a delay from the chosen pattern, so the same nine dots read as a sweep, a ripple, a chase, or a scatter.

Installation

npx stepwise-ui add dot-grid-loader

Default

import { DotGridLoader } from '@/components/stepwise/dot-grid-loader'

<DotGridLoader pattern="wave" />

Patterns

wave

ripple

snake

random

<DotGridLoader pattern="wave" />    // diagonal sweep
<DotGridLoader pattern="ripple" />  // out from the centre
<DotGridLoader pattern="snake" />   // chases the ring
<DotGridLoader pattern="random" />  // scatter

Props

PropTypeDescription

pattern

"wave" | "ripple" | "snake" | "random"

Delay pattern. Default "wave".

dot

number

Dot diameter in px. Default 6.

gap

number

Gap between dots in px. Default 5.

duration

number

Seconds per cycle. Default 1.4.