Warcraft Spinner

1import type * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import { SPINNER_PATH } from "@/components/ui/warcraftcn/assets/spinner-path";
6import "@/components/ui/warcraftcn/styles/warcraft.css";
7 
8const SPINNER_VIEW_BOX = "14 15.946284 187.21483 333.9404";
9const SPINNER_CENTER_X = 107.607415;
10const SPINNER_CENTER_Y = 182.916484;
11const SPINNER_STATIC_TRANSFORM = `translate(${SPINNER_CENTER_X} ${SPINNER_CENTER_Y}) rotate(-2) translate(${-SPINNER_CENTER_X} ${-SPINNER_CENTER_Y})`;
12 
13/** Renders the Warcraft-themed summoning glyph loading spinner. */
14function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
15  return (
16    <svg
17      data-slot="spinner"
18      role="status"
19      aria-label="Loading"
20      className={cn("wc-spinner size-10", className)}
21      viewBox={SPINNER_VIEW_BOX}
22      preserveAspectRatio="none"
23      xmlns="http://www.w3.org/2000/svg"
24      {...props}
25    >
26      <g transform={SPINNER_STATIC_TRANSFORM}>
27        <g className="wc-spinner-wrap">
28          <path
29            className="wc-spinner-glow"
30            d={SPINNER_PATH}
31            fill="currentColor"
32          />
33          <path
34            className="wc-spinner-core"
35            d={SPINNER_PATH}
36            fill="currentColor"
37          />
38        </g>
39      </g>
40    </svg>
41  );
42}
43 
44export { Spinner };