spinner

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./spinner.css"
6 
7const spinnerVariants = cva(
8  "inline-flex items-center justify-center",
9  {
10    variants: {
11      size: {
12        sm: "size-[var(--layout-size-xs)]",
13        md: "size-[var(--layout-size-md)]",
14        lg: "size-[var(--layout-size-lg)]",
15      },
16    },
17    defaultVariants: {
18      size: "md",
19    },
20  }
21)
22 
23function Spinner({
24  className,
25  size,
26  label = "Loading",
27  ...props
28}: React.ComponentProps<"span"> &
29  VariantProps<typeof spinnerVariants> & {
30    label?: string
31  }) {
32  return (
33    <span
34      data-slot="spinner"
35      role="status"
36      className={cn(spinnerVariants({ size, className }))}
37      {...props}
38    >
39      <svg
40        className="size-full spinner-svg"
41        viewBox="0 0 24 24"
42        fill="none"
43        xmlns="http://www.w3.org/2000/svg"
44        aria-hidden="true"
45      >
46        <circle
47          className="spinner-track"
48          cx="12"
49          cy="12"
50          r="9"
51          strokeWidth="1.5"
52        />
53        <circle
54          className="spinner-arc"
55          cx="12"
56          cy="12"
57          r="9"
58          strokeWidth="1.5"
59          strokeDasharray="14.14 42.41"
60          strokeLinecap="round"
61        />
62      </svg>
63      <span className="sr-only">{label}</span>
64    </span>
65  )
66}
67 
68export { Spinner, spinnerVariants }