react-loader-spinner/dist/tail-spin.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 p="#4fa94d",l={"aria-busy":true,role:"progressbar"};var m=v.div`
  display: ${e=>e.$visible?"flex":"none"};
`;var g="http://www.w3.org/2000/svg";var P=({height:e=80,width:d=80,strokeWidth:s=2,radius:f=1,color:r=p,ariaLabel:S="tail-spin-loading",wrapperStyle:c,wrapperClass:u,visible:b=true})=>{let a=parseInt(String(s)),n=a+36,i=a/2,C=i+parseInt(String(f))-1;return jsx(m,{style:c,$visible:b,className:u,"data-testid":"tail-spin-loading","aria-label":S,...l,children:jsxs("svg",{width:d,height:e,viewBox:`0 0 ${n} ${n}`,xmlns:g,"data-testid":"tail-spin-svg",children:[jsx("defs",{children:jsxs("linearGradient",{x1:"8.042%",y1:"0%",x2:"65.682%",y2:"23.865%",id:"a",children:[jsx("stop",{stopColor:r,stopOpacity:"0",offset:"0%"}),jsx("stop",{stopColor:r,stopOpacity:".631",offset:"63.146%"}),jsx("stop",{stopColor:r,offset:"100%"})]})}),jsx("g",{fill:"none",fillRule:"evenodd",children:jsxs("g",{transform:`translate(${i} ${i})`,children:[jsx("path",{d:"M36 18c0-9.94-8.06-18-18-18",id:"Oval-2",stroke:r,strokeWidth:s,children:jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})}),jsx("circle",{fill:"#fff",cx:"36",cy:"18",r:C,children:jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})})]})})]})})};
export{P as TailSpin};//# sourceMappingURL=tail-spin.mjs.map
//# sourceMappingURL=tail-spin.mjs.map