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.
19 lines • 1.96 kB
JavaScript
;var a=require('styled-components'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var a__default=/*#__PURE__*/_interopDefault(a);var s="#4fa94d";var o="http://www.w3.org/2000/svg";var r=242.776657104492,d=1.6,f=a.keyframes`
12.5% {
stroke-dasharray: ${r*.14}px, ${r}px;
stroke-dashoffset: -${r*.11}px;
}
43.75% {
stroke-dasharray: ${r*.35}px, ${r}px;
stroke-dashoffset: -${r*.35}px;
}
100% {
stroke-dasharray: ${r*.01}px, ${r}px;
stroke-dashoffset: -${r*.99}px;
}
`,l=a__default.default.path`
stroke-dasharray: ${r*.01}px, ${r};
stroke-dashoffset: 0;
animation: ${f} ${d}s linear infinite;
`,S=({color:i=s,width:e="200"})=>jsxRuntime.jsxs("svg",{xmlns:o,width:`${e}`,height:`${Number(e)*.5}`,viewBox:`0 0 ${e} ${Number(200*.5)}`,"data-testid":"infinity-spin",children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:"gradientColor",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[jsxRuntime.jsx("stop",{offset:"0%",stopColor:"#4fa94d"}),jsxRuntime.jsx("stop",{offset:"100%",stopColor:"#00BFFF"})]})}),jsxRuntime.jsx(l,{"data-testid":"infinity-spin-path-1",stroke:i,fill:"none",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round",strokeMiterlimit:"10",d:"M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"}),jsxRuntime.jsx("path",{"data-testid":"infinity-spin-path-2",opacity:"0.07",fill:"none",stroke:i,strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round",strokeMiterlimit:"10",d:"M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"})]});exports.InfinitySpin=S;//# sourceMappingURL=infinity-spin.cjs.map
//# sourceMappingURL=infinity-spin.cjs.map