spinner

1import { Spinner as ShadcnSpinner } from "@repo/shadcn-ui/components/ui/spinner";
2import {
3  LoaderCircleIcon,
4  LoaderIcon,
5  LoaderPinwheelIcon,
6  type LucideProps,
7} from "lucide-react";
8import { cn } from "@/lib/utils";
9 
10type SpinnerVariantProps = Omit<SpinnerProps, "variant">;
11 
12const Throbber = ({ className, ...props }: SpinnerVariantProps) => (
13  <LoaderIcon className={cn("animate-spin", className)} {...props} />
14);
15 
16const Pinwheel = ({ className, ...props }: SpinnerVariantProps) => (
17  <LoaderPinwheelIcon className={cn("animate-spin", className)} {...props} />
18);
19 
20const CircleFilled = ({
21  className,
22  size = 24,
23  ...props
24}: SpinnerVariantProps) => (
25  <div className="relative" style={{ width: size, height: size }}>
26    <div className="absolute inset-0 rotate-180">
27      <LoaderCircleIcon
28        className={cn("animate-spin", className, "text-foreground opacity-20")}
29        size={size}
30        {...props}
31      />
32    </div>
33    <LoaderCircleIcon
34      className={cn("relative animate-spin", className)}
35      size={size}
36      {...props}
37    />
38  </div>
39);
40 
41const Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => {
42  return (
43    <svg
44      height={size}
45      viewBox="0 0 24 24"
46      width={size}
47      xmlns="http://www.w3.org/2000/svg"
48      {...props}
49    >
50      <title>Loading...</title>
51      <circle cx="4" cy="12" fill="currentColor" r="2">
52        <animate
53          attributeName="cy"
54          begin="0;ellipsis3.end+0.25s"
55          calcMode="spline"
56          dur="0.6s"
57          id="ellipsis1"
58          keySplines=".33,.66,.66,1;.33,0,.66,.33"
59          values="12;6;12"
60        />
61      </circle>
62      <circle cx="12" cy="12" fill="currentColor" r="2">
63        <animate
64          attributeName="cy"
65          begin="ellipsis1.begin+0.1s"
66          calcMode="spline"
67          dur="0.6s"
68          keySplines=".33,.66,.66,1;.33,0,.66,.33"
69          values="12;6;12"
70        />
71      </circle>
72      <circle cx="20" cy="12" fill="currentColor" r="2">
73        <animate
74          attributeName="cy"
75          begin="ellipsis1.begin+0.2s"
76          calcMode="spline"
77          dur="0.6s"
78          id="ellipsis3"
79          keySplines=".33,.66,.66,1;.33,0,.66,.33"
80          values="12;6;12"
81        />
82      </circle>
83    </svg>
84  );
85};
86 
87const Ring = ({ size = 24, ...props }: SpinnerVariantProps) => (
88  <svg
89    height={size}
90    stroke="currentColor"
91    viewBox="0 0 44 44"
92    width={size}
93    xmlns="http://www.w3.org/2000/svg"
94// … truncated