Shadcn Spinner

Demo

A basic spinner component with default styling.

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

export function SpinnerDemo() {
  return <Spinner />
}

Installation

pnpmnpmyarnbun
pnpm dlx @creative-tim/ui@latest add spinner
Copy

Usage

Copyimport { Spinner } from "@/components/ui/spinner"
 
export default function Example() {
  return <Spinner />
}

Examples

Spinner Colors

Spinner component with different color variations using Tailwind CSS utilities.

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

export function SpinnerColors() {
  return (
    <div className="flex items-center gap-4">
      <Spinner className="text-blue-500" />
      <Spinner className="text-purple-500" />
      <Spinner className="text-cyan-500" />
      <Spinner className="text-green-500" />
      <Spinner className="text-yellow-500" />
      <Spinner className="text-red-500" />
    </div>
  )
}

You can customize the spinner color using the className prop with Tailwind text color utilities:

Copy<Spinner className="text-blue-500" />
<Spinner className="text-purple-500" />
<Spinner className="text-green-500" />

Spinner Sizes

Spinner component with different size variants from extra small to extra extra large.

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

export function SpinnerSizes() {
  return (
    <div className="flex items-end gap-4">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
      <Spinner size="xxl" />
    </div>
  )
}

The spinner component supports six size variants through the size prop:

Copy<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
<Spinner size="xxl" />

Spinner Custom Styles

Fully customizable spinner with custom dimensions and border width.

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

export function SpinnerCustomStyles() {
  return <Spinner className="h-16 w-16 border-4 text-blue-600" />
}

You can override the default styles using the className prop:

Copy<Spinner className="h-16 w-16 border-4 text-blue-600" />

Props

The Spinner component extends React.HTMLAttributes<HTMLDivElement> and includes the following additional props:

Size Specifications

• xs: 16px (h-4 w-4)
• sm: 24px (h-6 w-6)
• md: 32px (h-8 w-8) - Default
• lg: 48px (h-12 w-12)
• xl: 64px (h-16 w-16)
• xxl: 80px (h-20 w-20)

Accessibility

The Spinner component includes built-in accessibility features:

• role="status" attribute for screen readers
• Hidden "Loading..." text for assistive technologies via sr-only class
• Respects prefers-reduced-motion media query, using a slower animation speed when motion is reduced

Notes

The spinner uses a circular border animation that rotates continuously. The border-right is transparent to create the spinning effect. Colors can be customized using the className prop with any Tailwind CSS text color utility, and the component inherits the current text color by default.