react-loader-spinner/dist/line-wave.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 v from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var i="#4fa94d",a={"aria-busy":true,role:"progressbar"};var n=v.div`
  display: ${r=>r.$visible?"flex":"none"};
`;var s="http://www.w3.org/2000/svg";var A=({wrapperStyle:r={},visible:o=true,wrapperClass:p="",height:l=100,width:m=100,color:t=i,ariaLabel:g="line-wave-loading",firstLineColor:b,middleLineColor:d,lastLineColor:u})=>jsx(n,{style:r,$visible:o,className:p,"data-testid":"line-wave-wrapper","aria-label":g,...a,children:jsxs("svg",{version:"1.1",height:`${l}`,width:`${m}`,xmlns:s,x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 0 0",xmlSpace:"preserve","data-testid":"line-wave-svg",children:[jsx("rect",{x:"20",y:"50",width:"4",height:"10",fill:b||t,children:jsx("animateTransform",{attributeType:"xml",attributeName:"transform",type:"translate",values:"0 0; 0 20; 0 0",begin:"0",dur:"0.6s",repeatCount:"indefinite"})}),jsx("rect",{x:"30",y:"50",width:"4",height:"10",fill:d||t,children:jsx("animateTransform",{attributeType:"xml",attributeName:"transform",type:"translate",values:"0 0; 0 20; 0 0",begin:"0.2s",dur:"0.6s",repeatCount:"indefinite"})}),jsx("rect",{x:"40",y:"50",width:"4",height:"10",fill:u||t,children:jsx("animateTransform",{attributeType:"xml",attributeName:"transform",type:"translate",values:"0 0; 0 20; 0 0",begin:"0.4s",dur:"0.6s",repeatCount:"indefinite"})})]})});
export{A as LineWave};//# sourceMappingURL=line-wave.mjs.map
//# sourceMappingURL=line-wave.mjs.map