Square Grid

A grid of animated squares used for loading states. It displays moving blocks in a pattern. Use it to create a dynamic background effect during loading.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/square-grid

npx layro-cli add @turbostarter/square-grid

npx layro-cli add @turbostarter/square-grid

bunx layro-cli add @turbostarter/square-grid

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { cn } from "@/lib/utils";

const SQUARE_GRID_BLOCKS = ["█", "▓", "▒"] as const;

type SquareGridProps = React.ComponentProps<"span"> & {
  blocks?: readonly string[];
  size?: number;
  track?: string;
};

function SquareGrid({
  className,
  blocks = SQUARE_GRID_BLOCKS,
  size = 5,