react-loader-spinner/dist/rings.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 m from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var a="#4fa94d",n={"aria-busy":true,role:"progressbar"};var s=m.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})=>jsx(s,{style:g,$visible:u,className:d,"data-testid":"rings-loading","aria-label":c,...n,children:jsx("svg",{width:l,height:r,viewBox:"0 0 45 45",xmlns:o,stroke:p,"data-testid":"rings-svg",children:jsxs("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[jsxs("circle",{cx:"22",cy:"22",r:t,strokeOpacity:"0",children:[jsx("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),jsxs("circle",{cx:"22",cy:"22",r:t,strokeOpacity:"0",children:[jsx("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"strokeOpacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"strokeWidth",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),jsx("circle",{cx:"22",cy:"22",r:Number(t)+2,children:jsx("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})});
export{h as Rings};//# sourceMappingURL=rings.mjs.map
//# sourceMappingURL=rings.mjs.map