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

Get started for freeTalk to us