react-loader-spinner/dist/three-circles.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 f from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var i="#4fa94d",o={"aria-busy":true,role:"progressbar"};var a=f.div`
  display: ${e=>e.$visible?"flex":"none"};
`;var s="http://www.w3.org/2000/svg";var w=({wrapperStyle:e={},visible:n=true,wrapperClass:p="",height:l=100,width:c=100,color:t=i,ariaLabel:m="three-circles-loading",outerCircleColor:g,innerCircleColor:C,middleCircleColor:d})=>jsx(a,{style:e,$visible:n,className:p,"data-testid":"three-circles-wrapper","aria-label":m,...o,children:jsxs("svg",{version:"1.1",height:`${l}`,width:`${c}`,xmlns:s,viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve","data-testid":"three-circles-svg",children:[jsx("path",{fill:g||t,d:`M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
  c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z`,children:jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"2s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),jsx("path",{fill:d||t,d:`M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
  c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z`,children:jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),jsx("path",{fill:C||t,d:`M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
  L82,35.7z`,children:jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"2s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})})]})});export{w as ThreeCircles};//# sourceMappingURL=three-circles.mjs.map
//# sourceMappingURL=three-circles.mjs.map