Skip to main content
Shape patterns create geometric forms using the dot grid. These patterns are ideal for more visually distinctive loading states.

L-Shapes

L-shaped patterns form right angles in each corner.

l-tl

Forms an L-shape in the top-left corner.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="l-tl" variant="blue" />;
}
Visual: The top row and left column illuminate together, creating an L-shape anchored in the top-left.

l-tr

Forms an L-shape in the top-right corner.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="l-tr" variant="cyan" />;
}
Visual: Top row and right column light up, creating a reversed L-shape.

l-bl

Forms an L-shape in the bottom-left corner.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="l-bl" variant="green" />;
}
Visual: Bottom row and left column create an upside-down L-shape.

l-br

Forms an L-shape in the bottom-right corner.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="l-br" variant="purple" />;
}
Visual: Bottom row and right column form a mirrored, upside-down L-shape.

T-Shapes

T-shaped patterns combine a line with a perpendicular center line.

t-top

Forms a T-shape with the top as the crossbar.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="t-top" variant="indigo" />;
}
Visual: The top row and middle column illuminate to form a T-shape pointing down.

t-bot

Forms a T-shape with the bottom as the base.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="t-bot" variant="violet" />;
}
Visual: Bottom row and middle column create an upside-down T-shape.

t-left

Forms a T-shape pointing right.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="t-left" variant="pink" />;
}
Visual: Left column and middle row form a T rotated 90 degrees clockwise.

t-right

Forms a T-shape pointing left.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="t-right" variant="rose" />;
}
Visual: Right column and middle row create a T rotated 90 degrees counter-clockwise.

Corner Patterns

corners-only

Animates the four corner dots in sequence.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="corners-only" variant="amber" />;
}
Visual: Each corner dot lights up one at a time in a rotating sequence: top-left, top-right, bottom-right, bottom-left.

corners-sync

Pulses all four corner dots simultaneously.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="corners-sync" variant="yellow" />;
}
Visual: All four corner dots pulse together in perfect synchronization.

Plus Pattern

plus-hollow

Creates a plus sign with the four cardinal direction dots.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="plus-hollow" variant="orange" />;
}
Visual: Four dots at the top, right, bottom, and left edges (middle of each side) animate in sequence, forming a plus shape.

Frame Patterns

frame

Animates around the perimeter of the grid in sequence.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="frame" variant="blue" />;
}
Visual: Dots light up in order around the outer edge, creating a wave that travels clockwise around the frame.

frame-sync

Pulses the entire perimeter simultaneously.
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="frame-sync" variant="cyan" />;
}
Visual: All perimeter dots pulse together, creating a border effect.

Combining with Custom Grids

Shape patterns scale beautifully with larger grids:
// Large L-shape
<Lumidot pattern="l-tl" rows={5} cols={5} variant="purple" />

// Wide frame
<Lumidot pattern="frame" rows={3} cols={7} variant="blue" />

// Prominent T-shape
<Lumidot pattern="t-top" rows={7} cols={5} variant="green" />

Build docs developers (and LLMs) love