Menu

gitpiper

Loader react Code Snippet in 2023

componentsbeginner

Last Updated: 31 January 2023

Renders a spinning loader component.

  • Render an SVG, whose height and width are determined by the size 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.render(<Loader size={24} />, document.getElementById('root'));

react snippet similar to Loader For You in February 2023

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2023 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️