85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
|
||
interface LoadingSpinnerProps {
|
||
progress?: number
|
||
size?: number
|
||
strokeWidth?: number
|
||
className?: string
|
||
}
|
||
|
||
const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
||
progress = 0,
|
||
size = 140,
|
||
strokeWidth = 6,
|
||
className = ''
|
||
}) => {
|
||
const radius = (size - strokeWidth) / 2
|
||
const circumference = radius * 2 * Math.PI
|
||
const strokeDasharray = circumference
|
||
const strokeDashoffset = circumference - (progress / 100) * circumference
|
||
|
||
return (
|
||
<div className={`flex flex-col items-center justify-center ${className}`}>
|
||
<div className="relative" style={{ width: size, height: size }}>
|
||
{/* Фоновый круг с градиентом */}
|
||
<svg
|
||
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.08)"
|
||
strokeWidth={strokeWidth}
|
||
fill="transparent"
|
||
/>
|
||
|
||
{/* Прогресс круг с градиентом */}
|
||
<circle
|
||
cx={size / 2}
|
||
cy={size / 2}
|
||
r={radius}
|
||
stroke="url(#progressGradient)"
|
||
strokeWidth={strokeWidth}
|
||
fill="transparent"
|
||
strokeDasharray={strokeDasharray}
|
||
strokeDashoffset={strokeDashoffset}
|
||
strokeLinecap="round"
|
||
className="transition-all duration-500 ease-out filter drop-shadow-md"
|
||
/>
|
||
</svg>
|
||
|
||
{/* Процент в центре */}
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<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-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
|