Spindle

self-contained pixel loaders, one component

spinners

orbit

orbit · glow

radar

radar · glow

spiral

spiral · pop

waves

diagonal

snake

arrow-up

ripple

diamond

columns

rows

checker

ambient

twinkle

twinkle · glow

rain

rain · glow · tall

breathe · diamond

breathe · ripple

strips

squash · columns

flip · snake

diagonal · wide

columns · strip

rows · waterfall

spin · diagonal

cell styles

pulse

breathe

pop

blink

glow

flip

squash

spin

Docs

Spindle is a client component that renders a self-contained grid of animated pixels. It injects its own keyframes once per page, needs no CSS from your app, honors prefers-reduced-motion, and ships an aria-label plus an sr-only status for screen readers.

Install

Spindle ships in the facedye package under the /loaders entry. React is an optional peer dependency.

bash

pnpm add facedye

Usage

Drop it in wherever you'd reach for a spinner. Every prop is optional — the defaults give you a gentle diagonal pulse.

tsx

import { Spindle } from "facedye/loaders";

export function Saving() {
  return <Spindle pattern="orbit" label="Saving changes" />;
}

Props

prop	type	default
size	number	4
rows / cols	number	size
pattern	SpindlePattern	"diagonal"
animationStyle	SpindleStyle	"pulse"
speed	number	0.75
accentDensity	number	0.35
label	string	"Loading"

Patterns

The pattern decides how the wavefront moves. Edge-travel patterns (diagonal, columns, snake) scroll in a direction; radial ones (ripple, diamond, radar, orbit) pulse out from or circle the center.

diagonalsnakearrow-upripplediamondcolumnsrowscheckerrainradarspiraltwinkleorbit

Animation styles

The style is what each cell does as the wave reaches it — from a soft opacity pulse to a flip, squash, or neon glow. Mix any style with any pattern.

pulsebreathepopblinkglowflipsquashspin

Every prop

One loader wired up with every prop at once. Only rows/cols and size are mutually exclusive — everything else composes freely.

tsx

<Spindle
  rows={4}               // grid height
  cols={8}               // grid width (rows + cols → rectangle)
  pattern="snake"        // how the wave travels
  animationStyle="flip"  // what each cell does
  speed={0.8}            // seconds per cycle
  accentDensity={0.5}    // share of bright cells
  className="opacity-90" // forwarded to the grid element
  label="Placing your order" // screen-reader status
/>

Recipes

Common recipes, each rendered live next to its code. Mix any pattern with any animation style — every combination just works.

MinimalNo props — a gentle diagonal pulse on the default 4×4 grid.

tsx

<Spindle />

Square sizesize sets both dimensions at once.

tsx

<Spindle size={6} pattern="ripple" />

Rectangular striprows + cols make a wide bar — handy as a typing indicator.

tsx

<Spindle rows={3} cols={8} pattern="snake" animationStyle="flip" speed={0.8} />

Ring spinnerorbit hollows out the center for a classic spinner.

tsx

<Spindle size={5} pattern="orbit" animationStyle="glow" />

Twinkle glowA random per-cell shimmer — no directional wave.

tsx

<Spindle size={5} pattern="twinkle" animationStyle="glow" />

Denser accentsaccentDensity raises the share of bright cells (0–1).

tsx

<Spindle pattern="diamond" accentDensity={0.6} />

Slower cyclespeed is seconds per loop — larger is calmer.

tsx

<Spindle pattern="rain" speed={1.3} />

Label + classNamelabel sets the a11y status; className forwards styles.

tsx

<Spindle
  pattern="columns"
  label="Uploading"
  className="opacity-80"
/>