Skip to main content
ParticleUI

Spinner

Minimal rotating ring spinner with size variants.

xs
sm
md
lg
xl
Code
import { Spinner } from "@/components/ui/spinner"

export default function Example() {
  return <Spinner />
}

Installation

$npx particleui-cli add spinner

Usage

TSX
import { Spinner } from "@/components/ui/spinner"

export default function Example() {
  return <Spinner />
}

Examples

Sizes

Five size options from extra small to extra large.

TSX
import { Spinner } from "@/components/ui/spinner"

export default function Example() {
  return (
    <div className="flex items-center gap-6">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </div>
  )
}

Props

PropTypeDefaultRequired
size"xs" | "sm" | "md" | "lg" | "xl""md"no
classNamestringno

Details

Source filecomponents/ui/spinner.tsx
Typeui
Categoriesloaders, core
npm dependencies
Registry depscn
Claude skill