8-bit Spinner

1import React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5interface CommonSpinnerProps {
6  className?: string;
7  variant?: "classic" | "diamond";
8}
9 
10type SpinnerProps = CommonSpinnerProps &
11  (
12    | (React.ComponentProps<"svg"> & { variant?: "classic" })
13    | (React.ComponentProps<"svg"> & { variant: "diamond" })
14  );
15 
16const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
17  ({ className, variant = "classic", ...props }, ref) => {
18    return (
19      <>
20        {variant === "classic" && (
21          <svg
22            ref={ref}
23            width="50"
24            height="50"
25            viewBox="0 0 256 256"
26            fill="currentColor"
27            xmlns="http://www.w3.org/2000/svg"
28            stroke="currentColor"
29            strokeWidth="0.25"
30            className={cn("animate-spin size-5", className)}
31            role="status"
32            aria-label="Loading"
33            {...(props as React.ComponentProps<"svg">)}
34          >
35            <rect x="200" y="80" width="14" height="14" rx="1"></rect>
36            <rect x="200" y="96" width="14" height="14" rx="1"></rect>
37            <rect x="184" y="96" width="14" height="14" rx="1"></rect>
38            <rect x="184" y="80" width="14" height="14" rx="1"></rect>
39            <rect x="200" y="64" width="14" height="14" rx="1"></rect>
40            <rect x="168" y="96" width="14" height="14" rx="1"></rect>
41            <rect x="168" y="64" width="14" height="14" rx="1"></rect>
42            <rect x="152" y="48" width="14" height="14" rx="1"></rect>
43            <rect x="136" y="48" width="14" height="14" rx="1"></rect>
44            <rect x="120" y="48" width="14" height="14" rx="1"></rect>
45            <rect x="56" y="64" width="14" height="14" rx="1"></rect>
46            <rect x="72" y="64" width="14" height="14" rx="1"></rect>
47            <rect x="88" y="48" width="14" height="14" rx="1"></rect>
48            <rect x="104" y="48" width="14" height="14" rx="1"></rect>
49            <rect x="56" y="80" width="14" height="14" rx="1"></rect>
50            <rect x="40" y="80" width="14" height="14" rx="1"></rect>
51            <rect x="40" y="96" width="14" height="14" rx="1"></rect>
52            <rect x="40" y="112" width="14" height="14" rx="1"></rect>
53            <rect x="72" y="144" width="14" height="14" rx="1"></rect>
54            <rect x="40" y="160" width="14" height="14" rx="1"></rect>
55            <rect x="104" y="192" width="14" height="14" rx="1"></rect>
56// … truncated