Accordion Loader

AccordionLoader uses a monospace track, staggered block glyphs, and a surface-aware mask color so the moving trail cuts cleanly through the track.

import { AccordionLoader } from "@/components/loading-ui/accordion-loader";

export function AccordionLoaderDemo() {

Credits to shaah1d for creating the initial animation.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/accordion-loader
Copy

Usage

Copyimport { AccordionLoader } from "@/components/loading-ui/accordion-loader";

Copy<AccordionLoader />

Customization

Use trackLength for the measured text track, blocks and track for the unicode glyphs, and CSS variables such as --duration, --delay, and --mask-color for motion and surface matching.

Size

The loader is sized in ch units. Combine trackLength with text-size utilities to change both geometry and scale.

import { AccordionLoader } from "@/components/loading-ui/accordion-loader";

export function AccordionLoaderSize() {

Color

Foreground color controls the track and the moving block trail.

import { AccordionLoader } from "@/components/loading-ui/accordion-loader";

export function AccordionLoaderColor() {

Duration

Set --duration for faster or slower accordion motion.

import { AccordionLoader } from "@/components/loading-ui/accordion-loader";

export function AccordionLoaderDuration() {

Glyphs

Swap the unicode characters and set --mask-color when the loader sits on a non-default surface.

import { AccordionLoader } from "@/components/loading-ui/accordion-loader";

export function AccordionLoaderGlyphs() {