Rushil Dhinoja

Spinning Circle

Component 2

About

An animated circular loading spinner with an optional loading message positioned around it, for indicating a pending or in-progress state.

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

Code

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

Usage.tsx

import { SpinningCircle } from "@/components/ui/spinning-circle";

export default function SpinningCircleDemo() {
  return <SpinningCircle />;
}

Dependencies

More by Rushil Dhinoja

View all
  • Morphing Square

    Morphing Square

    435
  • Voice Input

    Voice Input

    311
  • Warp Dialog

    Warp Dialog

    264
  • Orbital Loader

    Orbital Loader

    204
  • Bouncing Dots

    Bouncing Dots

    193
  • Vignette Grid Background

    Vignette Grid Background

    190
  • Wave Loader

    Wave Loader

    131
  • Discussion

    Discussion

    85

Explore more

Part of Molecule UI — browse the full library on 21st.dev.