classic

1import { cn } from "@/lib/utils";
2 
3type ClassicProps = Omit<React.ComponentProps<"span">, "children">;
4 
5function Classic({ className, ...props }: ClassicProps) {
6  return (
7    <>
8      <style>{`
9        @keyframes loading-ui-classic-fade {
10          0% {
11            opacity: 1;
12          }
13 
14          100% {
15            opacity: 0.15;
16          }
17        }
18      `}</style>
19      <span
20        role="status"
21        className={cn("box-border inline-block size-5", className)}
22        {...props}
23      >
24        <span
25          aria-hidden="true"
26          className="relative top-1/2 left-1/2 block size-full"
27        >
28          {Array.from({ length: 12 }, (_, index) => (
29            <span
30              key={index}
31              className="absolute top-[-3.9%] left-[-10%] block h-[8%] w-[24%] rounded-(--radius) bg-current"
32              style={{
33                transform: `rotate(${index * 30}deg) translate(146%)`,
34                animation:
35                  "loading-ui-classic-fade var(--duration, 1.2s) linear infinite",
36                animationDelay: `calc(var(--duration, 1.2s) / 12 * ${index - 12})`,
37              }}
38            />
39          ))}
40        </span>
41        <span className="sr-only">Loading</span>
42      </span>
43    </>
44  );
45}
46 
47export { Classic };