conveyor-loop

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