react-loader-spinner/dist/infinity-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 a,{keyframes}from'styled-components';import {jsxs,jsx}from'react/jsx-runtime';var s="#4fa94d";var o="http://www.w3.org/2000/svg";var r=242.776657104492,d=1.6,f=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.path`
  stroke-dasharray: ${r*.01}px, ${r};
  stroke-dashoffset: 0;
  animation: ${f} ${d}s linear infinite;
`,S=({color:i=s,width:e="200"})=>jsxs("svg",{xmlns:o,width:`${e}`,height:`${Number(e)*.5}`,viewBox:`0 0 ${e} ${Number(200*.5)}`,"data-testid":"infinity-spin",children:[jsx("defs",{children:jsxs("linearGradient",{id:"gradientColor",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[jsx("stop",{offset:"0%",stopColor:"#4fa94d"}),jsx("stop",{offset:"100%",stopColor:"#00BFFF"})]})}),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"}),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"})]});export{S as InfinitySpin};//# sourceMappingURL=infinity-spin.mjs.map
//# sourceMappingURL=infinity-spin.mjs.map