UNPKG

react-loader-spinner

Version:

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

5 lines 1.82 kB
'use strict';var v=require('styled-components'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var v__default=/*#__PURE__*/_interopDefault(v);var p="#4fa94d",l={"aria-busy":true,role:"progressbar"};var m=v__default.default.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 jsxRuntime.jsx(m,{style:c,$visible:b,className:u,"data-testid":"tail-spin-loading","aria-label":S,...l,children:jsxRuntime.jsxs("svg",{width:d,height:e,viewBox:`0 0 ${n} ${n}`,xmlns:g,"data-testid":"tail-spin-svg",children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{x1:"8.042%",y1:"0%",x2:"65.682%",y2:"23.865%",id:"a",children:[jsxRuntime.jsx("stop",{stopColor:r,stopOpacity:"0",offset:"0%"}),jsxRuntime.jsx("stop",{stopColor:r,stopOpacity:".631",offset:"63.146%"}),jsxRuntime.jsx("stop",{stopColor:r,offset:"100%"})]})}),jsxRuntime.jsx("g",{fill:"none",fillRule:"evenodd",children:jsxRuntime.jsxs("g",{transform:`translate(${i} ${i})`,children:[jsxRuntime.jsx("path",{d:"M36 18c0-9.94-8.06-18-18-18",id:"Oval-2",stroke:r,strokeWidth:s,children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{fill:"#fff",cx:"36",cy:"18",r:C,children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})})]})})]})})}; exports.TailSpin=P;//# sourceMappingURL=tail-spin.cjs.map //# sourceMappingURL=tail-spin.cjs.map