83f090826e
* feat: model hub revamp UI * chore: model description - consistent markdown css * chore: add model versions dropdown * chore: integrate APIs - model sources * chore: update model display name * chore: lint fix * chore: page transition animation * feat: model search dropdown - deeplink * chore: bump cortex version * chore: add remote model sources * chore: model download state * chore: fix model metadata label * chore: polish model detail page markdown * test: fix test cases * chore: initialize default Hub model sources * chore: fix model stats * chore: clean up click outside and inside hooks * feat: change hub banner * chore: lint fix * chore: fix css long model id
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
|
|
const Spinner = ({ size = 40, strokeWidth = 4 }) => {
|
|
const radius = size / 2 - strokeWidth
|
|
const circumference = 2 * Math.PI * radius
|
|
|
|
return (
|
|
<motion.svg
|
|
width={size}
|
|
height={size}
|
|
viewBox={`0 0 ${size} ${size}`}
|
|
style={{ overflow: 'visible' }}
|
|
animate={{ rotate: 360 }}
|
|
transition={{
|
|
repeat: Infinity,
|
|
duration: 2, // Adjust for desired speed
|
|
ease: 'linear',
|
|
}}
|
|
>
|
|
{/* Static background circle */}
|
|
<circle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={radius}
|
|
stroke="#e0e0e0"
|
|
strokeWidth={strokeWidth}
|
|
fill="none"
|
|
/>
|
|
{/* Smooth animated arc */}
|
|
<motion.circle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={radius}
|
|
stroke="currentColor"
|
|
strokeWidth={strokeWidth}
|
|
fill="none"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={circumference * 0.9} // Adjusted offset for smooth arc
|
|
animate={{
|
|
strokeDashoffset: [circumference, circumference * 0.1], // Continuous motion
|
|
}}
|
|
transition={{
|
|
repeat: Infinity,
|
|
duration: 1.5, // Adjust for animation speed
|
|
ease: 'easeInOut', // Smooth easing
|
|
}}
|
|
strokeLinecap="round" // For a rounded end
|
|
/>
|
|
</motion.svg>
|
|
)
|
|
}
|
|
|
|
export default Spinner
|