wave

1import { cn } from "@/lib/utils";
2 
3const WAVE_BAR_HEIGHTS = ["50%", "75%", "100%", "75%", "50%"] as const;
4 
5function Wave({ className, ...props }: React.ComponentProps<"span">) {
6  return (
7    <>
8      <style>{`
9        @keyframes loading-ui-wave {
10          0%,
11          100% {
12            transform: scaleY(1);
13          }
14 
15          50% {
16            transform: scaleY(0.6);
17          }
18        }
19      `}</style>
20      <span
21        role="status"
22        className={cn("inline-flex items-center gap-[2.5%]", className)}
23        {...props}
24      >
25        {WAVE_BAR_HEIGHTS.map((height, index) => (
26          <span
27            key={index}
28            aria-hidden="true"
29            className="inline-block rounded-full bg-current"
30            style={{
31              width: "12.5%",
32              height,
33              animation:
34                "loading-ui-wave var(--duration, 1s) ease-in-out infinite",
35              animationDelay: `calc(var(--delay, 100ms) * ${index})`,
36            }}
37          />
38        ))}
39        <span className="sr-only">Loading</span>
40      </span>
41    </>
42  );
43}
44 
45export { Wave };