Componentfeedback

Spinner

Rotary loading indicator with dashed track and stamp accent.

Preview

Live Preview

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add spinner

Or install the full npm package:

npm install bigbullui

Usage

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

<Spinner size="md" />

Source code

spinner.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
  size?: "sm" | "md" | "lg";
  className?: string;
}

const sizeClasses = {
  sm: "size-4",
  md: "size-6",
  lg: "size-8",
};

export function Spinner({ size = "md", className, ...props }: SpinnerProps) {
  return (
    <svg
      role="status"
      aria-label="Loading"
      viewBox="0 0 24 24"
      fill="none"
      className={cn("animate-spin text-accent", sizeClasses[size], className)}
      {...props}
    >
      {/* Dashed outer track */}
      <circle
        cx="12"
        cy="12"
        r="9"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeDasharray="4 3"
        className="opacity-30"
      />
      {/* Active rotating arc */}
      <path
        d="M12 3a9 9 0 0 1 9 9"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

Props

Prop	Type	Description
size	"sm" \| "md" \| "lg"	Rotary indicator size (default 'md').