symmetric-wave

1import { cn } from "@/lib/utils";
2 
3const SYMMETRIC_WAVE_PHASES = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1] as const;
4 
5type SymmetricWaveProps = React.ComponentProps<"span"> & {
6  block?: string;
7  track?: string;
8};
9 
10function SymmetricWave({
11  className,
12  block = "█",
13  track = "░",
14  ...props
15}: SymmetricWaveProps) {
16  return (
17    <>
18      <style>{`
19        @keyframes loading-ui-symmetric-wave-1 {
20          0%,
21          100% {
22            opacity: 1;
23          }
24 
25          12.5%,
26          87.5% {
27            opacity: 0.6;
28          }
29 
30          25%,
31          75% {
32            opacity: 0.3;
33          }
34 
35          37.5%,
36          62.5%,
37          50% {
38            opacity: 0;
39          }
40        }
41 
42        @keyframes loading-ui-symmetric-wave-2 {
43          0%,
44          100% {
45            opacity: 0.6;
46          }
47 
48          12.5%,
49          87.5% {
50            opacity: 1;
51          }
52 
53          25%,
54          75% {
55            opacity: 0.6;
56          }
57 
58          37.5%,
59          62.5% {
60            opacity: 0.3;
61          }
62 
63          50% {
64            opacity: 0;
65          }
66        }
67 
68        @keyframes loading-ui-symmetric-wave-3 {
69          0%,
70          100% {
71            opacity: 0.3;
72          }
73 
74          12.5%,
75          87.5% {
76            opacity: 0.6;
77          }
78 
79          25%,
80          75% {
81            opacity: 1;
82          }
83 
84          37.5%,
85          62.5% {
86            opacity: 0.6;
87          }
88 
89          50% {
90            opacity: 0.3;
91          }
92        }
93 
94        @keyframes loading-ui-symmetric-wave-4 {
95          0%,
96          100% {
97            opacity: 0;
98          }
99 
100          12.5%,
101          87.5% {
102            opacity: 0.3;
103          }
104 
105          25%,
106          75% {
107            opacity: 0.6;
108          }
109 
110          37.5%,
111          62.5% {
112            opacity: 1;
113          }
114 
115          50% {
116            opacity: 0.6;
117          }
118        }
119 
120        @keyframes loading-ui-symmetric-wave-5 {
121          0%,
122          100%,
123          12.5%,
124          87.5% {
125            opacity: 0;
126          }
127 
128          25%,
129          75% {
130            opacity: 0.3;
131          }
132 
133          37.5%,
134          62.5% {
135            opacity: 0.6;
136          }
137 
138          50% {
139            opacity: 1;
140          }
141        }
142      `}</style>
143      <span
144        role="status"
145        className={cn(
146          "relative inline-flex h-[1em] w-[10ch] overflow-hidden font-mono text-xl leading-none text-current select-none",
147          className,
148        )}
149// … truncated