Spinner

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6 
7const spinnerVariants = cva(
8  "relative inline-flex shrink-0 items-center justify-center",
9  {
10    defaultVariants: { size: "md" },
11    variants: {
12      size: {
13        sm: "size-4",
14        md: "size-5",
15        lg: "size-6",
16      },
17    },
18  },
19);
20 
21type SpinnerSize = NonNullable<VariantProps<typeof spinnerVariants>["size"]>;
22 
23const strokePx: Record<SpinnerSize, number> = {
24  sm: 2.5,
25  md: 2.75,
26  lg: 3,
27};
28 
29export interface SpinnerProps
30  extends React.ComponentProps<"span">,
31    VariantProps<typeof spinnerVariants> {
32  /** Accessible label. */
33  label?: string;
34}
35 
36export function Spinner({
37  className,
38  size = "md",
39  label = "Loading",
40  ...props
41}: SpinnerProps): React.ReactElement {
42  const resolvedSize: SpinnerSize = size ?? "md";
43  const stroke = strokePx[resolvedSize];
44  const radius = (24 - stroke) / 2;
45  const circumference = 2 * Math.PI * radius;
46  const arc = circumference * 0.28;
47 
48  return (
49    <span
50      role="status"
51      aria-label={label}
52      data-slot="spinner"
53      className={cn(spinnerVariants({ size }), className)}
54      {...props}
55    >
56      <svg
57        aria-hidden="true"
58        viewBox="0 0 24 24"
59        className={cn(
60          "size-full animate-spin motion-reduce:animate-none",
61        )}
62      >
63        <circle
64          cx="12"
65          cy="12"
66          r={radius}
67          fill="none"
68          stroke="currentColor"
69          strokeWidth={stroke}
70          className="opacity-20"
71        />
72        <circle
73          cx="12"
74          cy="12"
75          r={radius}
76          fill="none"
77          stroke="currentColor"
78          strokeWidth={stroke}
79          strokeLinecap="round"
80          strokeDasharray={`${arc} ${circumference}`}
81        />
82      </svg>
83      <span className="sr-only">{label}</span>
84    </span>
85  );
86}