Conveyor Loop

A loading animation with moving blocks on a conveyor belt. It displays animated glyphs that scroll continuously. Use it to show loading states with a dynamic, rhythmic effect.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/conveyor-loop

npx layro-cli add @turbostarter/conveyor-loop

npx layro-cli add @turbostarter/conveyor-loop

bunx layro-cli add @turbostarter/conveyor-loop

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

Code

Demo

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

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

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

function ConveyorLoop({
  className,
  blocks = CONVEYOR_LOOP_BLOCKS,
  track = "░",