Skip to main content

​
Introduction to Lumidot

Lumidot is a React library that provides beautiful dot-grid loading animations with extensive customization options. With 36 unique patterns and 20 color variants, you can create loading states that perfectly match your application’s design.

36 patterns

From simple single dots to complex waves and spirals

20 color variants

Pre-configured colors from amber to yellow

Lightweight

Tiny bundle size with zero dependencies

Accessible

Respects prefers-reduced-motion automatically

​
What makes Lumidot special

Flexible grid system: Configure custom grid sizes with the rows and cols props to create loaders from 1x1 to any size you need. Smart animations: Two animation modes work automatically based on your chosen pattern. Wave animations pulse continuously across the grid, while sequence animations transition between frames. Production ready: Built with TypeScript, fully typed, and tested. Works with React 18 and 19. Zero configuration: Works beautifully out of the box with sensible defaults, but offers deep customization when you need it.

​
Quick preview

Here’s the simplest possible usage: 
import { Lumidot } from 'lumidot';

function App() {
  return <Lumidot />;
}
This renders a 3x3 blue dot grid with the default wave animation. Customize it with props: 
<Lumidot 
  pattern="spiral" 
  variant="purple" 
  rows={5} 
  cols={5} 
  scale={1.5} 
/>
Lumidot automatically respects the user’s prefers-reduced-motion setting, disabling animations for users who prefer reduced motion.

​
Animation modes

Lumidot uses two animation modes, automatically selected based on the pattern:
  • Wave mode: Continuous pulsing animation that flows across the grid. Control the speed with duration and the flow direction with direction.
  • Sequence mode: Frame-by-frame animation that cycles through different states. Used by patterns like corners-only, plus-hollow, and spiral.

​
Next steps

Installation

Install Lumidot in your React project

Quick start

Get up and running in 60 seconds