Styling

CSS Custom Properties

Active dots use CSS custom properties for animation control:

[data-lumidot-dot-active='true'] {
  --lumidot-duration: 1.2s;
  --lumidot-delay: 0.1s;
}

className

You can pass a className prop to add custom styles:

<Lumidot className="my-loader" />

Data Attributes

Lumidot uses data attributes for styling, making it easy to target specific states:

Attribute Values
data-lumidotPresent on root element
data-lumidot-patternall, frame, corners-only, plus-hollow, etc.
data-lumidot-variantblue, purple, red, green, etc.
data-lumidot-directionltr, rtl, ttb, btt
data-lumidot-modewave or sequence
data-lumidot-dotPresent on each dot element
data-lumidot-dot-activetrue or false
 
[data-lumidot-pattern="frame"] [data-lumidot-dot-active="true"] {
  border-radius: 50%;
}

Reduced Motion

Lumidot respects prefers-reduced-motion. When enabled:

  • The wave animation is disabled
  • Active dots remain visible but static
  • The grid layout is unaffected