Skip to main content
Lumidot provides several props to customize the visual appearance of your loading animations. You can apply custom styles, adjust the glow effect, and scale the entire component to fit your design needs.

​
className and style Props

Lumidot accepts standard React className and style props, allowing you to integrate it seamlessly with your existing CSS or styling solution.

​
Using className

Apply custom CSS classes to the root span element: 
import { Lumidot } from 'lumidot';

<Lumidot 
  pattern="all" 
  variant="blue" 
  className="my-custom-loader" 
/>

.my-custom-loader {
  margin: 20px auto;
  opacity: 0.9;
}

​
Using inline styles

Pass CSS properties directly via the style prop: 
<Lumidot 
  pattern="wave-lr" 
  variant="cyan" 
  style={{ 
    margin: '2rem auto',
    opacity: 0.8,
    filter: 'blur(0.5px)'
  }} 
/>
The component uses display: inline-grid by default. Grid properties like gridTemplateColumns and gridTemplateRows are calculated automatically based on rows and cols props.

​
Glow Effect

The glow prop controls the intensity of the shadow effect around active dots. The glow creates a luminous appearance by applying two layered box shadows.

​
How it works

From the source code (index.tsx:186-189): 
function glowShadow(glow: number, color: string): string {
  if (glow <= 0) return 'none';
  const bright = brighten(color);
  return `0 0 ${glow * 0.4}px ${color}, 0 0 ${glow}px ${bright}60`;
}
The function creates two shadows:
  • Inner shadow at 40% of glow value using the base color
  • Outer shadow at 100% of glow value using a brightened color with 60% opacity

​
Usage examples

<Lumidot 
  pattern="all" 
  variant="purple" 
  glow={0} 
/>
Use glow={0} for a flat, minimalist appearance or increase the value (15-25) for a vibrant, neon-like effect.

​
Scale

The scale prop multiplies the overall size of the component. The base size is 20px, and scaling adjusts both the container and individual dots proportionally.

​
Size calculation

From index.tsx:259-263: 
const size = 20 * scale;
const totalDots = rows * cols;
const gridMax = Math.max(rows, cols);
const dotSize = size / gridMax;
The dot size is calculated by dividing the scaled size by the larger dimension (rows or cols), ensuring the grid fits within the specified bounds.

​
Usage examples

<Lumidot 
  pattern="all" 
  variant="emerald" 
  scale={0.5} 
/>

​
Combining customization options

You can combine multiple customization props to create unique loading animations: 
<Lumidot 
  pattern="corners-sync"
  variant="fuchsia"
  rows={5}
  cols={5}
  scale={2}
  glow={15}
  className="hero-loader"
  style={{
    margin: '0 auto',
    filter: 'drop-shadow(0 4px 6px rgba(0,0,0,0.3))'
  }}
/>

Next Steps

Learn how to control animation timing and direction

Build docs developers (and LLMs) love

Get started for freeTalk to us