Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 1x | import React from 'react';
import { motion } from 'framer-motion';
import './Spinner.scss';
interface SpinnerProps {
size?: 'small' | 'medium' | 'large';
color?: string;
ariaLabel?: string;
}
const Spinner: React.FC<SpinnerProps> = ({ size = 'medium', color = '#007bff', ariaLabel = 'Loading...' }) => {
const sizes = {
small: '20px',
medium: '40px',
large: '60px',
};
return (
<div role="status" aria-label={ariaLabel} aria-busy="true">
<motion.div
className="loader"
animate={{ rotate: 360 }}
transition={{ repeat: Infinity, duration: 0.8, ease: 'linear' }}
style={{
width: sizes[size],
height: sizes[size],
border: `4px solid ${color}`,
borderTopColor: 'transparent',
borderRadius: '50%',
}}
/>
<span className="visually-hidden">{ariaLabel}</span>
</div>
);
};
export default Spinner;
|