Skip to main content
Lumidot provides several props to customize the appearance and behavior of your loading animations.

​
Scale

Control the physical size of the loader with the scale prop.

​
Default Size

<Lumidot scale={1} /> // 20px (default)
The base size is 20px. Use scale to make the loader larger or smaller: 
// Small
<Lumidot scale={0.5} /> // 10px

// Default
<Lumidot scale={1} />   // 20px

// Large
<Lumidot scale={2} />   // 40px

// Extra large
<Lumidot scale={3} />   // 60px
The scale prop accepts any positive number, including decimals like 1.5 or 0.75.

​
Responsive Scaling

Combine scale with CSS or responsive logic: 
function ResponsiveLoader() {
  const isMobile = window.innerWidth < 768;
  
  return (
    <Lumidot 
      scale={isMobile ? 0.8 : 1.2}
      pattern="all"
      variant="blue"
    />
  );
}

​
Glow

Control the intensity of the glow effect with the glow prop.

​
Glow Levels

// No glow
<Lumidot glow={0} />

// Subtle
<Lumidot glow={4} />

// Default
<Lumidot glow={8} />

// Intense
<Lumidot glow={16} />

// Maximum
<Lumidot glow={24} />

// Minimal, flat appearance
<Lumidot variant="cyan" glow={0} pattern="frame" />

// Soft, subtle glow for light backgrounds
<Lumidot variant="indigo" glow={3} pattern="all" />

// Standard glow for most use cases
<Lumidot variant="emerald" glow={8} pattern="wave-lr" />

// Dramatic glow for dark backgrounds
<Lumidot variant="fuchsia" glow={20} pattern="spiral" />

​
Duration

Control the speed of wave animations with the duration prop (in seconds).

​
Animation Speed

// Fast
<Lumidot duration={0.4} />

// Default
<Lumidot duration={0.7} />

// Slow
<Lumidot duration={1.2} />

// Very slow
<Lumidot duration={2} />
The duration prop only affects wave mode patterns. Sequence mode patterns (like corners-only and spiral) cycle at a fixed 1250ms interval.

​
Choosing Duration

Fast (0.3-0.5s)

When to use:
  • Quick operations
  • High-energy interfaces
  • Gaming or dynamic apps
Example:
<Lumidot duration={0.4} pattern="wave-lr" />

Default (0.6-0.9s)

When to use:
  • General loading states
  • Balanced feel
  • Most applications
Example:
<Lumidot duration={0.7} pattern="all" />

Slow (1.0-1.5s)

When to use:
  • Calm, meditative UIs
  • Premium/luxury brands
  • Background processes
Example:
<Lumidot duration={1.2} pattern="frame" />

Very Slow (1.6s+)

When to use:
  • Ambient animations
  • Decorative elements
  • Subtle background motion
Example:
<Lumidot duration={2} pattern="sparse-1" />

​
Direction

Control the wave direction with the direction prop.

​
Available Directions

type LumidotDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
  • 'ltr' — Left to right (default)
  • 'rtl' — Right to left
  • 'ttb' — Top to bottom
  • 'btt' — Bottom to top

​
Direction Examples

<Lumidot direction="ltr" pattern="all" />
The direction prop is ignored by wave-* patterns (e.g., wave-lr, wave-rl, wave-tb, wave-bt), which have built-in directions. However, the spiral pattern respects direction and reverses when direction is 'rtl' or 'btt'.

​
Directional Use Cases

// Progress indicator flowing right
<Lumidot direction="ltr" pattern="line-h-mid" />

// Reverse progress
<Lumidot direction="rtl" pattern="frame" />

// Vertical loading
<Lumidot direction="ttb" pattern="line-v-mid" />

// Bottom-up reveal
<Lumidot direction="btt" pattern="all" />

​
Grid Size

Customize the number of rows and columns in the grid.

​
Rows and Columns

// Default 3×3
<Lumidot rows={3} cols={3} />

// 5×5 grid
<Lumidot rows={5} cols={5} />

// Rectangular 3×5
<Lumidot rows={3} cols={5} />

// Single row
<Lumidot rows={1} cols={5} pattern="line-h-top" />

// Single column
<Lumidot rows={5} cols={1} pattern="line-v-left" />
Most patterns are designed for 3×3 grids. Changing grid size may produce unexpected or less visually appealing results for some patterns.
Best for:
  • Inline loading indicators
  • Button loaders
  • Compact UI elements
Patterns: All patterns work well
<Lumidot rows={3} cols={3} pattern="all" />

​
Styling

Add custom styles with className or style props.

​
Using className

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

.my-custom-loader {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #f9fafb;
}

​
Using style

<Lumidot 
  style={{
    border: '2px solid #e5e7eb',
    borderRadius: '8px',
    padding: '12px',
    background: '#f9fafb'
  }}
  pattern="all"
  variant="blue"
/>

​
Centering

// Flexbox center
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
  <Lumidot pattern="spiral" variant="fuchsia" />
</div>

// Grid center
<div style={{ display: 'grid', placeItems: 'center', height: '100vh' }}>
  <Lumidot pattern="all" variant="cyan" />
</div>

// Absolute center
<div style={{ position: 'relative', height: '100vh' }}>
  <Lumidot 
    style={{
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)'
    }}
    pattern="frame"
    variant="emerald"
  />
</div>

​
Advanced Customization

​
Combining Props

<Lumidot 
  pattern="spiral"
  variant="fuchsia"
  rows={5}
  cols={5}
  scale={2}
  glow={16}
  duration={1.2}
  direction="rtl"
  className="premium-loader"
/>

​
Conditional Customization

function AdaptiveLoader({ isUrgent }: { isUrgent: boolean }) {
  return (
    <Lumidot 
      variant={isUrgent ? 'red' : 'blue'}
      pattern={isUrgent ? 'all' : 'frame'}
      duration={isUrgent ? 0.4 : 0.7}
      glow={isUrgent ? 12 : 8}
    />
  );
}

​
Theme Integration

import { useTheme } from './theme';

function ThemedLoader() {
  const { isDark, accentColor } = useTheme();
  
  return (
    <Lumidot 
      variant={accentColor}
      glow={isDark ? 12 : 4}
      pattern="all"
    />
  );
}

​
Testing

Use the testId prop for testing: 
<Lumidot testId="main-loader" pattern="all" variant="blue" />

import { render, screen } from '@testing-library/react';
import { Lumidot } from 'lumidot';

test('renders loader', () => {
  render(<Lumidot testId="main-loader" />);
  const loader = screen.getByTestId('main-loader');
  expect(loader).toBeInTheDocument();
});

​
Next Steps

Patterns

Explore all 36 animation patterns

Accessibility

Learn about prefers-reduced-motion support

Build docs developers (and LLMs) love

Get started for freeTalk to us