react-loader-spinner/dist/puff.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 d from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var s="#4fa94d",n={"aria-busy":true,role:"progressbar"};var o=d.div`
  display: ${r=>r.$visible?"flex":"none"};
`;var a="http://www.w3.org/2000/svg";var T=({height:r=80,width:p=80,radius:t=1,color:l=s,ariaLabel:g="puff-loading",wrapperStyle:c,wrapperClass:m,visible:u=true})=>jsx(o,{style:c,$visible:u,className:m,"data-testid":"puff-loading","aria-label":g,...n,children:jsx("svg",{width:p,height:r,viewBox:"0 0 44 44",xmlns:a,stroke:l,"data-testid":"puff-svg",children:jsxs("g",{fill:"none",fillRule:"evenodd",strokeWidth:"2",children:[jsxs("circle",{cx:"22",cy:"22",r:t,children:[jsx("animate",{attributeName:"r",begin:"0s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),jsx("animate",{attributeName:"strokeOpacity",begin:"0s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})]}),jsxs("circle",{cx:"22",cy:"22",r:t,children:[jsx("animate",{attributeName:"r",begin:"-0.9s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),jsx("animate",{attributeName:"strokeOpacity",begin:"-0.9s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})]})]})})});
export{T as Puff};//# sourceMappingURL=puff.mjs.map
//# sourceMappingURL=puff.mjs.map