Skip to main content

​
Custom Styling

Lumidot provides multiple ways to customize the appearance of your loading animations to match your design system.

​
Using the className Prop

Add custom CSS classes to style the container. 
import { Lumidot } from 'lumidot';
import './loader.css';

function StyledLoader() {
  return (
    <div className="loader-container">
      <Lumidot 
        variant="purple"
        pattern="all"
        rows={3}
        cols={3}
        className="custom-loader"
      />
    </div>
  );
}

/* loader.css */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
}

.custom-loader {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

​
Using the style Prop

Apply inline styles directly to the Lumidot component. 
import { Lumidot } from 'lumidot';

function InlineStyledLoader() {
  return (
    <Lumidot 
      variant="cyan"
      pattern="wave-lr"
      rows={3}
      cols={4}
      style={{
        padding: '1.5rem',
        background: 'rgba(103, 232, 249, 0.1)',
        borderRadius: '16px',
        border: '2px solid rgba(103, 232, 249, 0.3)',
      }}
    />
  );
}

​
Scale Variations

The scale prop controls the overall size of the animation. Default is 1. 
import { Lumidot } from 'lumidot';

function ScaleExamples() {
  return (
    <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
      {/* Extra small - for tight spaces */}
      <Lumidot 
        variant="rose"
        pattern="duo-h"
        rows={1}
        cols={3}
        scale={0.5}
        glow={4}
      />

      {/* Small - for buttons */}
      <Lumidot 
        variant="amber"
        pattern="line-h-mid"
        rows={1}
        cols={5}
        scale={0.8}
        glow={6}
      />

      {/* Default - general use */}
      <Lumidot 
        variant="blue"
        pattern="all"
        rows={3}
        cols={3}
        scale={1}
        glow={8}
      />

      {/* Large - for splash screens */}
      <Lumidot 
        variant="emerald"
        pattern="spiral"
        rows={4}
        cols={4}
        scale={2}
        glow={10}
      />

      {/* Extra large - for hero sections */}
      <Lumidot 
        variant="fuchsia"
        pattern="frame-sync"
        rows={5}
        cols={5}
        scale={3}
        glow={12}
      />
    </div>
  );
}

​
Glow Customization

The glow prop controls the intensity of the shadow effect. Default is 8. 
import { Lumidot } from 'lumidot';

function GlowExamples() {
  return (
    <div style={{ 
      display: 'grid', 
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: '2rem',
      padding: '2rem',
      background: '#1a1a1a'
    }}>
      {/* No glow - flat appearance */}
      <div style={{ textAlign: 'center' }}>
        <Lumidot 
          variant="white"
          pattern="all"
          rows={3}
          cols={3}
          glow={0}
        />
        <p style={{ color: '#999', marginTop: '0.5rem' }}>glow={0}</p>
      </div>

      {/* Subtle glow */}
      <div style={{ textAlign: 'center' }}>
        <Lumidot 
          variant="sky"
          pattern="all"
          rows={3}
          cols={3}
          glow={4}
        />
        <p style={{ color: '#999', marginTop: '0.5rem' }}>glow={4}</p>
      </div>

      {/* Default glow */}
      <div style={{ textAlign: 'center' }}>
        <Lumidot 
          variant="violet"
          pattern="all"
          rows={3}
          cols={3}
          glow={8}
        />
        <p style={{ color: '#999', marginTop: '0.5rem' }}>glow={8}</p>
      </div>

      {/* Strong glow */}
      <div style={{ textAlign: 'center' }}>
        <Lumidot 
          variant="pink"
          pattern="all"
          rows={3}
          cols={3}
          glow={12}
        />
        <p style={{ color: '#999', marginTop: '0.5rem' }}>glow={12}</p>
      </div>

      {/* Intense glow */}
      <div style={{ textAlign: 'center' }}>
        <Lumidot 
          variant="orange"
          pattern="all"
          rows={3}
          cols={3}
          glow={16}
        />
        <p style={{ color: '#999', marginTop: '0.5rem' }}>glow={16}</p>
      </div>

      {/* Maximum glow */}
      <div style={{ textAlign: 'center' }}>
        <Lumidot 
          variant="yellow"
          pattern="all"
          rows={3}
          cols={3}
          glow={20}
        />
        <p style={{ color: '#999', marginTop: '0.5rem' }}>glow={20}</p>
      </div>
    </div>
  );
}

​
Color Variants

Lumidot includes 20 built-in color variants. 
import { Lumidot } from 'lumidot';

function ColorPalette() {
  const colors = [
    'amber', 'blue', 'cyan', 'emerald', 'fuchsia',
    'green', 'indigo', 'lime', 'orange', 'pink',
    'purple', 'red', 'rose', 'sky', 'slate',
    'teal', 'violet', 'white', 'black', 'yellow'
  ];

  return (
    <div style={{ 
      display: 'grid', 
      gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
      gap: '1.5rem',
      padding: '2rem'
    }}>
      {colors.map(color => (
        <div key={color} style={{ textAlign: 'center' }}>
          <Lumidot 
            variant={color}
            pattern="all"
            rows={3}
            cols={3}
            scale={1.2}
            glow={8}
          />
          <p style={{ marginTop: '0.5rem', fontSize: '0.875rem' }}>{color}</p>
        </div>
      ))}
    </div>
  );
}

​
Combining Style Props

Create unique designs by combining multiple styling options. 
import { Lumidot } from 'lumidot';

function StyledCard() {
  return (
    <div style={{
      maxWidth: '400px',
      margin: '2rem auto',
      padding: '2rem',
      background: 'linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)',
      borderRadius: '16px',
      boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
    }}>
      <Lumidot 
        variant="white"
        pattern="spiral"
        rows={4}
        cols={4}
        scale={2}
        glow={12}
        className="card-loader"
        style={{
          margin: '0 auto',
          padding: '1.5rem',
          background: 'rgba(255, 255, 255, 0.1)',
          borderRadius: '12px',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.2)'
        }}
      />
      <p style={{ 
        color: 'white', 
        textAlign: 'center', 
        marginTop: '1.5rem',
        fontWeight: '500'
      }}>
        Loading your dashboard...
      </p>
    </div>
  );
}

​
Dark Mode Support

Adapt styling based on theme. 
import { Lumidot } from 'lumidot';

function ThemeAwareLoader({ isDarkMode }) {
  return (
    <Lumidot 
      variant={isDarkMode ? 'cyan' : 'indigo'}
      pattern="wave-lr"
      rows={3}
      cols={4}
      scale={1.5}
      glow={isDarkMode ? 12 : 8}
      style={{
        padding: '1rem',
        background: isDarkMode 
          ? 'rgba(103, 232, 249, 0.1)' 
          : 'rgba(165, 180, 252, 0.1)',
        borderRadius: '8px',
        border: `1px solid ${isDarkMode ? 'rgba(103, 232, 249, 0.2)' : 'rgba(165, 180, 252, 0.2)'}`
      }}
    />
  );
}

​
Tips

  • Use scale to resize the entire animation without changing the grid structure
  • Increase glow on dark backgrounds for more dramatic effects
  • Reduce glow to 0 for a flat, minimal appearance
  • Combine className and style for maximum flexibility
  • Use variant="white" or variant="black" for monochrome designs

Build docs developers (and LLMs) love

Get started for freeTalk to us