infinity-square-snake

1import { cn } from "@/lib/utils";
2 
3const INFINITY_SQUARE_SNAKE_BLOCKS = ["█", "▓", "▒", "░"] as const;
4 
5type InfinitySquareSnakeProps = React.ComponentProps<"span"> & {
6  blocks?: readonly string[];
7};
8 
9function InfinitySquareSnake({
10  className,
11  blocks = INFINITY_SQUARE_SNAKE_BLOCKS,
12  ...props
13}: InfinitySquareSnakeProps) {
14  const glyphs = INFINITY_SQUARE_SNAKE_BLOCKS.map(
15    (_, index) => blocks[index] ?? INFINITY_SQUARE_SNAKE_BLOCKS[index],
16  );
17 
18  return (
19    <>
20      <style>{`
21        @keyframes loading-ui-infinity-square-snake {
22          0%,
23          100% {
24            transform: translate(4ch, 0);
25          }
26 
27          12.5% {
28            transform: translate(0, 0);
29          }
30 
31          25% {
32            transform: translate(0, 4ch);
33          }
34 
35          37.5% {
36            transform: translate(4ch, 4ch);
37          }
38 
39          50% {
40            transform: translate(4ch, 0);
41          }
42 
43          62.5% {
44            transform: translate(8ch, 0);
45          }
46 
47          75% {
48            transform: translate(8ch, 4ch);
49          }
50 
51          87.5% {
52            transform: translate(4ch, 4ch);
53          }
54        }
55      `}</style>
56      <span
57        role="status"
58        className={cn(
59          "relative inline-flex h-[5ch] w-[9ch] overflow-hidden font-mono text-xl leading-none text-current select-none",
60          className,
61        )}
62        {...props}
63      >
64        {glyphs.map((glyph, index) => (
65          <span
66            key={`${glyph}-${index}`}
67            aria-hidden="true"
68            className="pointer-events-none absolute top-0 left-0 flex h-[1ch] w-[1ch] items-center justify-center"
69            style={{
70              animation:
71                "loading-ui-infinity-square-snake var(--duration, 3.2s) linear infinite",
72              animationDelay: `calc(var(--delay, 0.1s) * -${glyphs.length - 1 - index})`,
73            }}
74          >
75            {glyph}
76          </span>
77        ))}
78        <span className="sr-only">Loading</span>
79      </span>
80    </>
81  );
82}
83 
84export { InfinitySquareSnake };