react-loader-spinner/dist/mutating-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 d from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var t="#4fa94d",a={"aria-busy":true,role:"progressbar"};var n=d.div`
  display: ${r=>r.$visible?"flex":"none"};
`;var T=({height:r=90,width:s=80,radius:o=12.5,color:l=t,secondaryColor:p=t,ariaLabel:g="mutating-dots-loading",wrapperStyle:m,wrapperClass:c,visible:u=true})=>jsx(n,{style:m,$visible:u,className:c,"data-testid":"mutating-dots-loading","aria-label":g,...a,children:jsxs("svg",{id:"goo-loader",width:s,height:r,"data-testid":"mutating-dots-svg",children:[jsxs("filter",{id:"fancy-goo",children:[jsx("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"6",result:"blur"}),jsx("feColorMatrix",{in:"blur",mode:"matrix",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9",result:"goo"}),jsx("feComposite",{in:"SourceGraphic",in2:"goo",operator:"atop"})]}),jsxs("g",{filter:"url(#fancy-goo)",children:[jsx("animateTransform",{id:"mainAnim",attributeName:"transform",attributeType:"XML",type:"rotate",from:"0 50 50",to:"359 50 50",dur:"1.2s",repeatCount:"indefinite"}),jsx("circle",{cx:"50%",cy:"40",r:o,fill:l,children:jsx("animate",{id:"cAnim1",attributeType:"XML",attributeName:"cy",dur:"0.6s",begin:"0;cAnim1.end+0.2s",calcMode:"spline",values:"40;20;40",keyTimes:"0;0.3;1",keySplines:"0.09, 0.45, 0.16, 1;0.09, 0.45, 0.16, 1"})}),jsx("circle",{cx:"50%",cy:"60",r:o,fill:p,children:jsx("animate",{id:"cAnim2",attributeType:"XML",attributeName:"cy",dur:"0.6s",begin:"0.4s;cAnim2.end+0.2s",calcMode:"spline",values:"60;80;60",keyTimes:"0;0.3;1",keySplines:"0.09, 0.45, 0.16, 1;0.09, 0.45, 0.16, 1"})})]})]})});export{T as MutatingDots};//# sourceMappingURL=mutating-dots.mjs.map
//# sourceMappingURL=mutating-dots.mjs.map