|
@@ -1,25 +1,39 @@
|
|
|
import { FC } from "react";
|
|
import { FC } from "react";
|
|
|
|
|
|
|
|
interface LoadingSpinnerProps {
|
|
interface LoadingSpinnerProps {
|
|
|
- size?: "sm" | "md" | "lg";
|
|
|
|
|
|
|
+ colorClassName?: string;
|
|
|
|
|
+ size?: 16 | 24 | 32 | 48;
|
|
|
className?: string;
|
|
className?: string;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
export const LoadingSpinner: FC<LoadingSpinnerProps> = ({
|
|
export const LoadingSpinner: FC<LoadingSpinnerProps> = ({
|
|
|
- size = "md",
|
|
|
|
|
- className = ""
|
|
|
|
|
|
|
+ size = 24,
|
|
|
|
|
+ className = "" ,
|
|
|
|
|
+ colorClassName = "text-success"
|
|
|
}) => {
|
|
}) => {
|
|
|
const sizeClasses = {
|
|
const sizeClasses = {
|
|
|
- sm: "h-4 w-4",
|
|
|
|
|
- md: "h-8 w-8",
|
|
|
|
|
- lg: "h-12 w-12"
|
|
|
|
|
|
|
+ 16: "h-4 w-4",
|
|
|
|
|
+ 24: "h-6 w-6",
|
|
|
|
|
+ 32: "h-8 w-8",
|
|
|
|
|
+ 48: "h-12 w-12"
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
- <div className={`flex items-center justify-center py-8 ${className}`}>
|
|
|
|
|
- <div
|
|
|
|
|
- className={`animate-spin rounded-full border-b-2 border-neutral-800 dark:border-white ${sizeClasses[size]}`}
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <div className={`flex items-center justify-center ${className}`}>
|
|
|
|
|
+ <svg viewBox="0 0 32 32" fill="none" strokeWidth="3"
|
|
|
|
|
+ className={`z-0 relative overflow-hidden ${colorClassName} animate-spinner-ease-spin ${sizeClasses[size]}`}
|
|
|
|
|
+ >
|
|
|
|
|
+ <circle cx="16" cy="16" r="13" role="presentation"
|
|
|
|
|
+ strokeDasharray="81.68140899333463 81.68140899333463"
|
|
|
|
|
+ strokeDashoffset="0" transform="rotate(-90 16 16)"
|
|
|
|
|
+ strokeLinecap="round"
|
|
|
|
|
+ className="h-full stroke-default-300/50"></circle>
|
|
|
|
|
+ <circle cx="16" cy="16" r="13" role="presentation"
|
|
|
|
|
+ strokeDasharray="81.68140899333463 81.68140899333463"
|
|
|
|
|
+ strokeDashoffset="61.26105674500097" transform="rotate(-90 16 16)"
|
|
|
|
|
+ strokeLinecap="round"
|
|
|
|
|
+ className="h-full stroke-current transition-all !duration-500"></circle>
|
|
|
|
|
+ </svg>
|
|
|
</div>
|
|
</div>
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|