pulse-dot

1import { cn } from "@/lib/utils";
2 
3function PulseDot({ className, ...props }: React.ComponentProps<"span">) {
4  return (
5    <>
6      <style>{`
7        @keyframes loading-ui-pulse-dot {
8          0%,
9          100% {
10            transform: scale(1);
11            opacity: 0.8;
12          }
13 
14          50% {
15            transform: scale(1.5);
16            opacity: 1;
17          }
18        }
19      `}</style>
20      <span
21        role="status"
22        className={cn("inline-block rounded-full bg-current", className)}
23        style={{
24          animation:
25            "loading-ui-pulse-dot var(--duration, 1.2s) ease-in-out infinite",
26        }}
27        {...props}
28      >
29        <span className="sr-only">Loading</span>
30      </span>
31    </>
32  );
33}
34 
35export { PulseDot };