forked from 77media/video-flow
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface IconLoadingProps {
|
|
icon: LucideIcon;
|
|
isActive: boolean;
|
|
color: string;
|
|
}
|
|
|
|
export const IconLoading: React.FC<IconLoadingProps> = ({ icon: Icon, isActive, color }) => {
|
|
if (!isActive) return null;
|
|
|
|
return (
|
|
<div className="flex items-center space-x-2">
|
|
<motion.div
|
|
animate={{ rotate: [0, 360] }}
|
|
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
|
>
|
|
<Icon className="w-4 h-4" style={{ color }} />
|
|
</motion.div>
|
|
<div className="flex space-x-1">
|
|
{[0, 1, 2].map((i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="w-1 h-1 rounded-full"
|
|
style={{ backgroundColor: color }}
|
|
animate={{
|
|
y: [0, -4, 0],
|
|
opacity: [0.4, 1, 0.4]
|
|
}}
|
|
transition={{
|
|
duration: 1.2,
|
|
repeat: Infinity,
|
|
delay: i * 0.2,
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|