pulse

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