Skip to main content

​
Quickstart

Get Lumidot up and running in your React project in under a minute.
1

Install Lumidot

Install the package using your preferred package manager:
npm install lumidot
Lumidot requires React 18.0.0 or higher. It works with both React 18 and React 19.
2

Import and use

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

function App() {
  return (
    <div>
      <h1>Loading...</h1>
      <Lumidot />
    </div>
  );
}
That’s it! You now have a beautiful 3x3 blue dot-grid loading animation.
3

Customize (optional)

Try different patterns and colors:
import { Lumidot } from 'lumidot';

function App() {
  return (
    <>
      <Lumidot pattern="spiral" />
      <Lumidot pattern="wave-lr" />
      <Lumidot pattern="corners-only" />
    </>
  );
}

​
Common use cases

Here are some practical examples to get you started:

​
Loading indicator

Display a loading state while fetching data: 
import { Lumidot } from 'lumidot';

function DataComponent() {
  const [loading, setLoading] = React.useState(true);
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
        <Lumidot pattern="wave-lr" variant="blue" />
      </div>
    );
  }

  return <div>{/* render data */}</div>;
}

​
Full-page loader

Create a centered full-page loading screen: 
import { Lumidot } from 'lumidot';

function FullPageLoader() {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh',
      backgroundColor: '#000'
    }}>
      <Lumidot 
        pattern="spiral" 
        variant="cyan" 
        rows={5} 
        cols={5} 
        scale={2}
      />
    </div>
  );
}

​
Inline loading state

Show a small loader inline with content: 
import { Lumidot } from 'lumidot';

function InlineLoader() {
  return (
    <button disabled>
      <span>Processing</span>
      <Lumidot pattern="solo-center" scale={0.6} glow={4} />
    </button>
  );
}

​
TypeScript usage

Lumidot is fully typed. Import types for type-safe usage: 
import { Lumidot, LumidotProps, LumidotPattern, LumidotVariant } from 'lumidot';

const myPattern: LumidotPattern = 'wave-lr';
const myVariant: LumidotVariant = 'purple';

const props: LumidotProps = {
  pattern: myPattern,
  variant: myVariant,
  rows: 5,
  cols: 5,
  duration: 1.2,
  glow: 10,
};

function TypedComponent() {
  return <Lumidot {...props} />;
}

​
Available props

Here’s a quick reference of all available props with their default values:
PropTypeDefaultDescription
patternLumidotPattern'all'Animation pattern (36 options)
variantLumidotVariant'blue'Color variant (20 options)
rowsnumber3Number of rows in the grid
colsnumber3Number of columns in the grid
directionLumidotDirection'ltr'Wave direction: 'ltr', 'rtl', 'ttb', 'btt'
scalenumber1Size multiplier (1 = 20px per dot)
glownumber8Glow intensity
durationnumber0.7Animation duration in seconds
classNamestring—Additional CSS classes
styleCSSProperties—Inline styles
testIdstring—Sets data-testid attribute
For detailed documentation on all props, see the Props reference.

​
Next steps

Explore patterns

Browse all 36 animation patterns

Try colors

See all 20 color variants

Customize

Learn about scale, glow, duration, and more

API reference

Complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us