text-dots

1import { cn } from "@/lib/utils";
2 
3type TextDotsProps = React.ComponentProps<"span"> & {
4  dots?: number;
5};
6 
7function TextDots({
8  className,
9  children,
10  dots = 3,
11  style,
12  ...props
13}: TextDotsProps) {
14  const dotCount = Number.isFinite(dots) ? Math.max(1, Math.floor(dots)) : 3;
15 
16  return (
17    <>
18      <style>{`
19        @keyframes loading-ui-text-dots {
20          0%,
21          100% {
22            opacity: 0;
23          }
24 
25          50% {
26            opacity: 1;
27          }
28        }
29      `}</style>
30      <span
31        role="status"
32        className={cn("inline-flex items-center", className)}
33        style={style}
34        {...props}
35      >
36        <span>{children}</span>
37        <span aria-hidden="true" className="inline-flex">
38          {Array.from({ length: dotCount }, (_, index) => (
39            <span
40              key={index}
41              style={{
42                animation:
43                  "loading-ui-text-dots var(--duration, 1.4s) infinite",
44                animationDelay: `calc(var(--delay, 0.2s) * ${index + 1})`,
45              }}
46            >
47              .
48            </span>
49          ))}
50        </span>
51      </span>
52    </>
53  );
54}
55 
56export { TextDots };