Accordion Loader

A loader component that uses an accordion-like animation with blocks to show loading states. It renders a series of animated glyphs inside a track. Use it to provide a visual loading indicator in user interfaces.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/accordion-loader

npx layro-cli add @turbostarter/accordion-loader

npx layro-cli add @turbostarter/accordion-loader

bunx layro-cli add @turbostarter/accordion-loader

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

Code

Demo

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

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

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

function AccordionLoader({
  className,
  blocks = ACCORDION_LOADER_BLOCKS,
  track = "░",