import { Loader2Icon } from "lucide-react"; import { cn } from "../lib/utils"; function Spinner({ className, ...props }: React.ComponentProps<"svg">) { return ( <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} /> );} const IOS_SPINNER_BLADES = 12; function IOSSpinner({ className, ...props }: React.ComponentProps<"svg">) { return ( <svg role="status" aria-label="Loading" viewBox="0 0 24 24" className={cn("size-4 text-muted-foreground", className)} {...props} > {Array.from({ length: IOS_SPINNER_BLADES }).map((_, i) => ( <rect key={i} x="11" y="2" width="2" height="6" rx="1" fill="currentColor" transform={`rotate(${(360 / IOS_SPINNER_BLADES) * i} 12 12)`} style={{ animation: "ios-spinner-fade 1s linear infinite", animationDelay: `${(i / IOS_SPINNER_BLADES) * 1 - 1}s`, opacity: 0.25, }} /> ))} </svg> );} export { Spinner, IOSSpinner };
import { Loader2Icon } from "lucide-react";
import { cn } from "../lib/utils";
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
return (
<Loader2Icon
role="status"
aria-label="Loading"
className={cn("size-4 animate-spin", className)}
{...props}
/>
);
}
const IOS_SPINNER_BLADES = 12;
function IOSSpinner({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
role="status"
aria-label="Loading"
viewBox="0 0 24 24"
className={cn("size-4 text-muted-foreground", className)}
{...props}
>
{Array.from({ length: IOS_SPINNER_BLADES }).map((_, i) => (
<rect
key={i}
x="11"
y="2"
width="2"
height="6"
rx="1"
fill="currentColor"
transform={`rotate(${(360 / IOS_SPINNER_BLADES) * i} 12 12)`}
style={{
animation: "ios-spinner-fade 1s linear infinite",
animationDelay: `${(i / IOS_SPINNER_BLADES) * 1 - 1}s`,
opacity: 0.25,
}}
/>
))}
</svg>
);
}
export { Spinner, IOSSpinner };