Spinner

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6type SizeVariant = "sm" | "default" | "md" | "lg";
7type SpeedVariant = "slow" | "normal" | "fast";
8 
9const SpinnerPrimitive = React.forwardRef<
10  React.ElementRef<"svg">,
11  React.SVGProps<SVGSVGElement>
12>(
13  ({ ...props }, ref) => {
14    const id = React.useId();
15 
16    return (
17      <svg ref={ref} data-slot-icon viewBox="0 0 24 24" {...props}>
18        <defs>
19          <linearGradient
20            id={`gradient-1-${id}`}
21            x1="50%"
22            x2="50%"
23            y1="5.271%"
24            y2="91.793%"
25          >
26            <stop offset="0%" stopColor="currentColor" />
27            <stop offset="100%" stopColor="currentColor" stopOpacity={0.55} />
28          </linearGradient>
29          <linearGradient
30            id={`gradient-2-${id}`}
31            x1="50%"
32            x2="50%"
33            y1="15.24%"
34            y2="87.15%"
35          >
36            <stop offset="0%" stopColor="currentColor" stopOpacity={0} />
37            <stop offset="100%" stopColor="currentColor" stopOpacity={0.55} />
38          </linearGradient>
39        </defs>
40        <g fill="none">
41          <path
42            d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"
43            fill={`url(#gradient-1-${id})`}
44            transform="translate(1.5 1.625)"
45          />
46          <path
47            d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"
48            fill={`url(#gradient-2-${id})`}
49            transform="translate(1.5 1.625)"
50          />
51        </g>
52      </svg>
53    );
54  },
55);
56 
57SpinnerPrimitive.displayName = "SpellUI.SpinnerPrimitive";
58 
59const sizeClasses: Record<SizeVariant, string> = {
60  sm: "h-4 w-4",
61  default: "h-5 w-5",
62  md: "h-6 w-6",
63  lg: "h-8 w-8",
64};
65 
66const speedClasses: Record<SpeedVariant, string> = {
67  slow: "animate-[spin_2s_linear_infinite]",
68  normal: "animate-spin",
69  fast: "animate-[spin_0.5s_linear_infinite]",
70};
71 
72interface SpinnerProps
73  extends Omit<React.ComponentPropsWithoutRef<"svg">, "display" | "opacity"> {
74  size?: SizeVariant;
75  speed?: SpeedVariant;
76  className?: string;
77}
78 
79export const Spinner = React.forwardRef<
80  React.ComponentRef<typeof SpinnerPrimitive>,
81  SpinnerProps
82>(
83  ({ className, size = "md", speed = "normal", ...props }, ref) => {
84    return (
85      <span
86// … truncated