Componentfeedback0.5 KB gzipZero dependencies

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

Open in StackBlitz

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

<Spinner size="md" />

Usage guidance

Use Spinner when a ticket stub surface needs Rotary loading indicator with dashed track and stamp accent. Keep props minimal and prefer composition with sibling stubs.

Avoid Spinner for long form flows or dense data grids where a dedicated layout block fits better.

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"
className?	string