react-loader-spinner/dist/three-dots.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 g from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var a="#4fa94d",o={"aria-busy":true,role:"progressbar"};var n=g.div`
  display: ${t=>t.$visible?"flex":"none"};
`;var s="http://www.w3.org/2000/svg";var h=({height:t=80,width:l=80,radius:i=9,color:p=a,ariaLabel:c="three-dots-loading",wrapperStyle:m,wrapperClass:d,visible:u=true})=>jsx(n,{style:m,$visible:u,className:d,"data-testid":"three-dots-loading","aria-label":c,...o,children:jsxs("svg",{width:l,height:t,viewBox:"0 0 120 30",xmlns:s,fill:p,"data-testid":"three-dots-svg",children:[jsxs("circle",{cx:"15",cy:"15",r:Number(i)+6,children:[jsx("animate",{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})]}),jsxs("circle",{cx:"60",cy:"15",r:i,attributeName:"fill-opacity",from:"1",to:"0.3",children:[jsx("animate",{attributeName:"r",from:"9",to:"9",begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"fill-opacity",from:"0.5",to:"0.5",begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"})]}),jsxs("circle",{cx:"105",cy:"15",r:Number(i)+6,children:[jsx("animate",{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})]})]})});
export{h as ThreeDots};//# sourceMappingURL=three-dots.mjs.map
//# sourceMappingURL=three-dots.mjs.map