typing

1import { cn } from "@/lib/utils";
2 
3function Typing({
4  className,
5  dots = 3,
6  ...props
7}: React.ComponentProps<"span"> & { dots?: number }) {
8  return (
9    <>
10      <style>{`
11        @keyframes loading-ui-typing {
12          0%,
13          100% {
14            transform: translateY(0);
15            opacity: 0.5;
16          }
17 
18          50% {
19            transform: translateY(-50%);
20            opacity: 1;
21          }
22        }
23      `}</style>
24      <span
25        role="status"
26        className={cn("inline-flex items-center gap-[12%]", className)}
27        {...props}
28      >
29        {Array.from({ length: dots }, (_, index) => (
30          <span
31            key={index}
32            aria-hidden="true"
33            className="inline-block aspect-square grow rounded-full bg-current"
34            style={{
35              animation: "loading-ui-typing var(--duration, 1s) infinite",
36              animationDelay: `calc(var(--delay, 160ms) * ${index})`,
37            }}
38          />
39        ))}
40        <span className="sr-only">Loading</span>
41      </span>
42    </>
43  );
44}
45 
46export { Typing };