Spinner

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6const spinnerVariants = cva("animate-spin", {
7  variants: {
8    size: {
9      sm: "size-4",
10      default: "size-6",
11      lg: "size-8",
12      xl: "size-12",
13    },
14    speed: {
15      slow: "[animation-duration:1200ms]",
16      default: "[animation-duration:900ms]",
17      fast: "[animation-duration:600ms]",
18    },
19  },
20  defaultVariants: {
21    size: "default",
22    speed: "default",
23  },
24})
25 
26export interface SpinnerProps
27  extends Omit<React.ComponentProps<"svg">, "size" | "speed">,
28    VariantProps<typeof spinnerVariants> {
29  /**
30   * Stroke width of the spinner arc
31   * @default 3
32   */
33  strokeWidth?: number
34  /**
35   * CSS class for the background circle
36   * @default "stroke-muted-foreground/20"
37   */
38  bgClassName?: string
39}
40 
41const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
42  ({ className, size, speed, strokeWidth = 3, bgClassName = "stroke-muted-foreground/20", ...props }, ref) => {
43    return (
44      <svg
45        ref={ref}
46        className={cn(spinnerVariants({ size, speed }), "text-foreground", className)}
47        viewBox="0 0 42 42"
48        {...props}
49      >
50        <g fill="none" transform="translate(3 3)" strokeWidth={strokeWidth}>
51          <circle className={bgClassName} cx="18" cy="18" r="18" />
52          <path
53            className="stroke-current"
54            stroke="currentColor"
55            d="M36 18c0-9.94-8.06-18-18-18"
56            strokeLinecap="round"
57            strokeLinejoin="round"
58          />
59        </g>
60      </svg>
61    )
62  },
63)
64 
65Spinner.displayName = "Spinner"
66 
67export { Spinner, spinnerVariants }