first

frontend/components/ui/LoadingSpinner.tsx

@@ -11,8 +11,8 @@ interface LoadingSpinnerProps {
 
 const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   progress = 0,
-  size = 120,
-  strokeWidth = 8,
+  size = 140,
+  strokeWidth = 6,
   className = ''
 }) => {
   const radius = (size - strokeWidth) / 2
@@ -22,47 +22,63 @@ const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
 
   return (
     <div className={`flex flex-col items-center justify-center ${className}`}>
-      <div className="relative" style={{ width: size, height: size }}> 
+      <div className="relative" style={{ width: size, height: size }}>
+        {/* Фоновый круг с градиентом */}
         <svg
-          className="transform -rotate-90"
+          className="transform -rotate-90 drop-shadow-lg"
           width={size}
           height={size}
           viewBox={`0 0 ${size} ${size}`}
         >
+          <defs>
+            <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#2563eb" />
+              <stop offset="100%" stopColor="#0891b2" />
+            </linearGradient>
+          </defs>
+          
+          {/* Фоновый круг */}
           <circle
             cx={size / 2}
             cy={size / 2}
             r={radius}
-            stroke="rgba(255, 255, 255, 0.1)"
+            stroke="rgba(255, 255, 255, 0.08)"
             strokeWidth={strokeWidth}
             fill="transparent"
           /> 
+          
+          {/* Прогресс круг с градиентом */}
           <circle
             cx={size / 2}
             cy={size / 2}
             r={radius}
-            stroke="#389ee8"
+            stroke="url(#progressGradient)"
             strokeWidth={strokeWidth}
             fill="transparent"
             strokeDasharray={strokeDasharray}
             strokeDashoffset={strokeDashoffset}
             strokeLinecap="round"
-            className="transition-all duration-300 ease-out"
+            className="transition-all duration-500 ease-out filter drop-shadow-md"
           />
         </svg>
          
+        {/* Процент в центре */}
         <div className="absolute inset-0 flex items-center justify-center">
-          <span className="text-white text-xl font-semibold">
-            {Math.round(progress)}%
-          </span>
+          <div className="text-center">
+            <span className="text-white text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">
+              {Math.round(progress)}%
+            </span>
+          </div>
         </div>
       </div>
        
-      <div className="mt-4 text-white text-base font-medium">
-        Loading Model...
+      {/* Текст загрузки */}
+      <div className="mt-6 text-center">
+        <p className="text-white text-lg font-semibold">Загрузка модели…</p>
+        <p className="text-gray-400 text-sm mt-2">Пожалуйста, подождите</p>
       </div>
     </div>
   )
 }
 
-export default LoadingSpinner
+export default LoadingSpinner