Square Accordion

SquareAccordion follows the same square edge as SquareGrid, but its timeline holds at each corner to create an accordion-like trail collapse.

import { SquareAccordion } from "@/components/loading-ui/square-accordion";

export function SquareAccordionDemo() {

Credits to shaah1d for creating the initial animation.

Installation

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

Usage

Copyimport { SquareAccordion } from "@/components/loading-ui/square-accordion";

Copy<SquareAccordion />

Customization

Use size, blocks, and track for the grid shape, and tune --duration, --delay, and --mask-color for motion and surface matching.

Size

Increase the grid cells and text scale for larger square loaders.

import { SquareAccordion } from "@/components/loading-ui/square-accordion";

export function SquareAccordionSize() {

Color

Apply text color utilities to recolor both the track and trail.

import { SquareAccordion } from "@/components/loading-ui/square-accordion";

export function SquareAccordionColor() {

Duration

Set --duration to change the travel-and-pause cycle.

import { SquareAccordion } from "@/components/loading-ui/square-accordion";

export function SquareAccordionDuration() {

Glyphs

Swap the track and moving blocks, and set --mask-color for non-default surfaces.

import { SquareAccordion } from "@/components/loading-ui/square-accordion";

export function SquareAccordionGlyphs() {