loading-ui

Square Accordion Loader

Component 10

About

An animated ASCII square loader whose block glyphs trace the perimeter like an accordion for loading states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Square Accordion Loader to your project and fits it to your theme.

Code

How Square Accordion Loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function SquareAccordionDemo() {
  return (
    <div className="flex min-h-[300px] w-full items-center justify-center">
      <SquareAccordion />
    </div>
  );
}

More by loading-ui

View all
  • Morphing Infinity

    Morphing Infinity

    89
  • Analyzing Image

    Analyzing Image

    85
  • Conveyor Loop

    Conveyor Loop

    60
  • Infinity Loop

    Infinity Loop

    53
  • Diamond Loading Spinner

    Diamond Loading Spinner

    48
  • Wave

    Wave

    44
  • Swirling Spinner

    Swirling Spinner

    39
  • Accordion Loader

    Accordion Loader

    38