react-loader-spinner/dist/falling-lines.mjs

react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.

import {jsxs,jsx}from'react/jsx-runtime';var a="#4fa94d",n={"aria-busy":true,role:"progressbar"};var s="http://www.w3.org/2000/svg";var g=({color:r=a,width:i="100",visible:o=true})=>o?jsxs("svg",{xmlns:s,width:i,height:i,viewBox:"0 0 100 100","data-testid":"falling-lines",...n,children:[jsxs("rect",{y:"25",width:"10",height:"50",rx:"4",ry:"4",fill:r,"data-testid":"falling-lines-rect-1",children:[jsx("animate",{attributeName:"x",values:"10;100",dur:"1.2s",repeatCount:"indefinite"}),jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 10 70",to:"-60 100 70",dur:"1.2s",repeatCount:"indefinite"}),jsx("animate",{attributeName:"opacity",values:"0;1;0",dur:"1.2s",repeatCount:"indefinite"})]}),jsxs("rect",{y:"25",width:"10",height:"50",rx:"4",ry:"4",fill:r,opacity:0,children:[jsx("animate",{attributeName:"x",values:"10;100",dur:"1.2s",begin:"0.4s",repeatCount:"indefinite"}),jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 10 70",to:"-60 100 70",dur:"1.2s",begin:"0.4s",repeatCount:"indefinite"}),jsx("animate",{attributeName:"opacity",values:"0;1;0",dur:"1.2s",begin:"0.4s",repeatCount:"indefinite"})]}),jsxs("rect",{y:"25",width:"10",height:"50",rx:"4",ry:"4",fill:r,opacity:0,"data-testid":"falling-lines-rect-2",children:[jsx("animate",{attributeName:"x",values:"10;100",dur:"1.2s",begin:"0.8s",repeatCount:"indefinite"}),jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 10 70",to:"-60 100 70",dur:"1.2s",begin:"0.8s",repeatCount:"indefinite"}),jsx("animate",{attributeName:"opacity",values:"0;1;0",dur:"1.2s",begin:"0.8s",repeatCount:"indefinite"})]})]}):null;
export{g as FallingLines};//# sourceMappingURL=falling-lines.mjs.map
//# sourceMappingURL=falling-lines.mjs.map