Tile flip loaderPro

Square tiles flipping on Y in a diagonal wave, 2 to 4 a side. Transform and opacity only, settles flat under reduced motion.

Markdown

On this page

ProTiles flipping on Y in a diagonal wave, at display size and beside a status line.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/tile-flip-loader

Usage

tsx

import { TileFlipLoader } from "@/components/ui/chatcn/pro/tile-flip-loader"

<TileFlipLoader grid={3} size="lg" />

Tiles are currentColor, so a text class sets the tone. The wave starts at the reading side corner: in a right to left layout it mirrors on its own.

Examples

Grids and states

Pro2, 3 and 4 tiles a side, tones, in a button, sizes, paused and the reduced motion frame.

Pending timing

As a pending state, a loader never shows in the first 300 ms, and once shown it stays at least 400 ms so it never flashes. useDelayedPresence from the free thinking-indicator does both.

Props

Prop	Type	Notes
`grid`	`2 \| 3 \| 4`	Tiles per side. Default 3
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number`	12, 16, 24, 40 or 72 px, or any side length
`speed`	`number`	Loop speed multiplier. Default 1
`paused`	`boolean`	Freezes the loop
`still`	`boolean`	Draws the reduced motion frame
`label`	`string`	Accessible name. Default "Loading"; empty hides it

Motion

Each tile turns a full revolution on Y in the first half of a 2 s loop. Past 90 degrees it shows a dim back, and the switch happens exactly edge on, so the change is never seen.
Under reduced motion the movement stops on one still frame and the whole loader breathes in opacity, 1 to 0.55 over 1.4 s. still draws that frame on demand; paused freezes the loop where it is.
Animates only transform, opacity and clip-path. No JavaScript runs per frame.

Accessibility

The loader is role="img" named by label, "Loading" by default. Next to a visible label, pass label="" and it hides from assistive tech.
Announce the outcome, not the wait: put a polite live region on the result instead of on the loader.
Under forced-colors the shapes draw in CanvasText.