Skip to main content
Solo patterns display a single animated dot in different positions on the grid. These patterns are perfect for minimal, unobtrusive loading indicators.

​
solo-center

Displays a single pulsing dot in the center of the grid. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="solo-center" variant="blue" />;
}
Visual: A single dot appears in the center position of a 3x3 grid, pulsing with a gentle glow effect.

​
Use Cases

  • Minimal loading states
  • Inline content loading
  • Subtle status indicators

​
solo-tl

Displays a single pulsing dot in the top-left corner. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="solo-tl" variant="green" />;
}
Visual: A single dot appears in the top-left corner of the grid, creating an anchored effect.

​
Use Cases

  • Corner status indicators
  • Small badge-style loaders
  • Positional loading hints

​
solo-br

Displays a single pulsing dot in the bottom-right corner. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="solo-br" variant="purple" />;
}
Visual: A single dot appears in the bottom-right corner of the grid, mirroring the top-left pattern.

​
Use Cases

  • Opposite corner indicators
  • Complementary to solo-tl
  • Diagonal visual balance

​
Customization

All solo patterns support full customization: 
<Lumidot
  pattern="solo-center"
  variant="fuchsia"
  rows={5}
  cols={5}
  glow={12}
  scale={1.5}
  duration={1}
/>

​
Parameters

  • rows / cols - Change grid size (default: 3x3)
  • glow - Adjust glow intensity (default: 8)
  • scale - Scale the entire component (default: 1)
  • duration - Animation speed in seconds (default: 0.7)
  • variant - Color from the built-in palette

Build docs developers (and LLMs) love

Get started for freeTalk to us