Skip to main content

Lumidot

Dot-grid loading animations for React. Tiny, flexible, beautiful.

Get startedAPI reference

Quick start

Get up and running with Lumidot in seconds

1

Install the package

Install Lumidot using your preferred package manager:
npm
npm install lumidot
yarn
yarn add lumidot
pnpm
pnpm add lumidot
2

Import and use

Import the Lumidot component and add it to your React app:
import { Lumidot } from 'lumidot';

function App() {
  return <Lumidot />;
}
3

Customize

Customize the pattern, color, and grid size:
<Lumidot 
  pattern="wave-lr" 
  variant="blue" 
  rows={5} 
  cols={5} 
/>

Explore by topic

Learn about Lumidot’s features and capabilities

Patterns

36 animation patterns from solo dots to complex waves

Variants

20 color variants with customizable glow effects

Animation modes

Wave and sequence modes for different effects

Grid configuration

Customize rows, columns, and dot sizing

Animation control

Control duration, direction, and timing

Accessibility

Built-in support for prefers-reduced-motion

Examples

See Lumidot in action with real-world examples

Solo patterns

Single dot animations and minimal patterns

Line patterns

Horizontal, vertical, and diagonal line animations

Shape patterns

L-shapes, T-shapes, and corner patterns

Wave patterns

Directional wave animations across the grid

Ready to get started?

Follow our quickstart guide to add beautiful loading animations to your React app in minutes.

Get started

Build docs developers (and LLMs) love

Get started for freeTalk to us