Rushil Dhinoja

Morphing Square

Component 436

About

A customisable morphing square loader component for indicating loading states in your application. Features smooth shape transitions and optional loading messages.

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

Code

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

Usage.tsx

import { MorphingSquare } from "@/components/ui/morphing-square";

export default function DemoOne() {
  return <MorphingSquare message='Loading...' />;
}

Dependencies

More by Rushil Dhinoja

View all
  • Voice Input

    Voice Input

    313
  • Warp Dialog

    Warp Dialog

    267
  • Orbital Loader

    Orbital Loader

    209
  • Bouncing Dots

    Bouncing Dots

    193
  • Vignette Grid Background

    Vignette Grid Background

    190
  • Wave Loader

    Wave Loader

    132
  • Discussion

    Discussion

    85
  • Word Rotate

    Word Rotate

    63