quarter-ring

1import { cn } from "@/lib/utils";
2 
3function QuarterRing({ className, ...props }: React.ComponentProps<"span">) {
4  return (
5    <>
6      <style>{`
7        @keyframes loading-ui-quarter-ring-rotation {
8          0% {
9            transform: rotate(0deg);
10          }
11 
12          100% {
13            transform: rotate(360deg);
14          }
15        }
16      `}</style>
17      <span
18        role="status"
19        className={cn(
20          "inline-block rounded-full border-t-[3px] border-r-[3px] border-t-current border-r-transparent",
21          className,
22        )}
23        style={{
24          animation:
25            "loading-ui-quarter-ring-rotation var(--duration, 1s) linear infinite",
26        }}
27        {...props}
28      >
29        <span className="sr-only">Loading</span>
30      </span>
31    </>
32  );
33}
34 
35export { QuarterRing };