react-loader-spinner/dist/ball-triangle.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 b from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var a="#4fa94d",n={"aria-busy":true,role:"progressbar"};var l=b.div`
  display: ${t=>t.$visible?"flex":"none"};
`;var o="http://www.w3.org/2000/svg";var y=({height:t=100,width:s=100,radius:i=5,color:c=a,ariaLabel:p="ball-triangle-loading",wrapperClass:g,wrapperStyle:m,visible:d=true})=>jsx(l,{style:{...m},$visible:d,className:g,"data-testid":"ball-triangle-loading","aria-label":p,...n,children:jsxs("svg",{height:t,width:s,stroke:c,viewBox:"0 0 57 57",xmlns:o,"data-testid":"ball-triangle-svg",children:[jsx("title",{children:"Ball Triangle"}),jsx("desc",{children:"Animated representation of three balls"}),jsx("g",{fill:"none",fillRule:"evenodd",children:jsxs("g",{transform:"translate(1 1)",strokeWidth:"2",children:[jsxs("circle",{cx:"5",cy:"50",r:i,children:[jsx("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;5;50;50",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",values:"5;27;49;5",calcMode:"linear",repeatCount:"indefinite"})]}),jsxs("circle",{cx:"27",cy:"5",r:i,children:[jsx("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",from:"5",to:"5",values:"5;50;50;5",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",from:"27",to:"27",values:"27;49;5;27",calcMode:"linear",repeatCount:"indefinite"})]}),jsxs("circle",{cx:"49",cy:"50",r:i,children:[jsx("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;50;5;50",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"cx",from:"49",to:"49",begin:"0s",dur:"2.2s",values:"49;5;27;49",calcMode:"linear",repeatCount:"indefinite"})]})]})})]})});
export{y as BallTriangle};//# sourceMappingURL=ball-triangle.mjs.map
//# sourceMappingURL=ball-triangle.mjs.map