react-loader-spinner/dist/rings.cjs

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

'use strict';var m=require('styled-components'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var m__default=/*#__PURE__*/_interopDefault(m);var a="#4fa94d",n={"aria-busy":true,role:"progressbar"};var s=m__default.default.div`
  display: ${r=>r.$visible?"flex":"none"};
`;var o="http://www.w3.org/2000/svg";var h=({height:r=80,width:l=80,radius:t=6,color:p=a,ariaLabel:c="rings-loading",wrapperStyle:g,wrapperClass:d,visible:u=true})=>jsxRuntime.jsx(s,{style:g,$visible:u,className:d,"data-testid":"rings-loading","aria-label":c,...n,children:jsxRuntime.jsx("svg",{width:l,height:r,viewBox:"0 0 45 45",xmlns:o,stroke:p,"data-testid":"rings-svg",children:jsxRuntime.jsxs("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[jsxRuntime.jsxs("circle",{cx:"22",cy:"22",r:t,strokeOpacity:"0",children:[jsxRuntime.jsx("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),jsxRuntime.jsxs("circle",{cx:"22",cy:"22",r:t,strokeOpacity:"0",children:[jsxRuntime.jsx("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"strokeOpacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"strokeWidth",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),jsxRuntime.jsx("circle",{cx:"22",cy:"22",r:Number(t)+2,children:jsxRuntime.jsx("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})});
exports.Rings=h;//# sourceMappingURL=rings.cjs.map
//# sourceMappingURL=rings.cjs.map