Loading Spinner

Component 84

About

Loading Spinners I can't find the original developers. If you know them, please share their information in an issue.

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

Code

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

Usage.tsx

import { Spinner, RoundSpinner, Dots_v1, Dots_v2, Dots_v3, Dots_v4 } from "@/components/ui/spinner"

export function SpinnerDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Spinner />
    </div>
  )
}

export function RoundSpinnerDemo() {
  return (
    <div className="flex items-center space-x-2">
      <RoundSpinner />
    </div>
  )
}

export function Dots_v1_Demo() {
  return (
    <div className="flex items-center space-x-2">
      <Dots_v1 />
    </div>
  )
}

export function Dots_v2_Demo() {
  return (
    <div className="flex items-center space-x-2">
      <Dots_v2 />
    </div>
  )
}

export function Dots_v3_Demo() {
  return (
    <div className="flex items-center space-x-2">
      <Dots_v3 />
    </div>
  )
}

export function Dots_v4_Demo() {
  return (
    <div className="flex items-center space-x-2">
      <Dots_v4 />
    </div>
  )
}