Spinning loader
Renders a spinning loader component.
- Render an SVG, whose
height
andwidth
are determined by thesize
prop. - Use CSS to animate the SVG, creating a spinning animation.
.loader { animation: rotate 2s linear infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } .loader circle { animation: dash 1.5s ease-in-out infinite; } @keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }
const Loader = ({ size }) => { return ( <svg className="loader" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <circle cx="12" cy="12" r="10" /> </svg> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <Loader size={24} /> );