square-snake

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