forked from 77media/video-flow
43 lines
893 B
TypeScript
43 lines
893 B
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface DotLoadingProps {
|
|
isActive: boolean;
|
|
color?: string;
|
|
size?: 'small' | 'medium' | 'large';
|
|
}
|
|
|
|
export const DotLoading: React.FC<DotLoadingProps> = ({
|
|
isActive,
|
|
color = '#ffffff',
|
|
size = 'small'
|
|
}) => {
|
|
if (!isActive) return null;
|
|
|
|
const dotSize = {
|
|
small: 'w-1 h-1',
|
|
medium: 'w-1.5 h-1.5',
|
|
large: 'w-2 h-2'
|
|
}[size];
|
|
|
|
return (
|
|
<div className="flex space-x-1">
|
|
{[0, 1, 2].map((i) => (
|
|
<motion.div
|
|
key={i}
|
|
className={`rounded-full ${dotSize}`}
|
|
style={{ backgroundColor: color }}
|
|
animate={{
|
|
scale: [1, 1.5, 1],
|
|
opacity: [1, 0.5, 1]
|
|
}}
|
|
transition={{
|
|
duration: 1,
|
|
repeat: Infinity,
|
|
delay: i * 0.2
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|