Procházet zdrojové kódy

loading 组件修改

fogwind před 1 týdnem
rodič
revize
e9182e7bd3
1 změnil soubory, kde provedl 24 přidání a 10 odebrání
  1. 24 10
      src/components/common/LoadingSpinner.tsx

+ 24 - 10
src/components/common/LoadingSpinner.tsx

@@ -1,25 +1,39 @@
 import { FC } from "react";
 
 interface LoadingSpinnerProps {
-  size?: "sm" | "md" | "lg";
+  colorClassName?: string;
+  size?: 16 | 24 | 32 | 48;
   className?: string;
 }
 
 export const LoadingSpinner: FC<LoadingSpinnerProps> = ({ 
-  size = "md", 
-  className = "" 
+  size = 24, 
+  className = "" ,
+  colorClassName = "text-success"
 }) => {
   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 (
-    <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>
   );
 };