react-loader-spinner
Version:
react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.
5 lines • 1.13 kB
JavaScript
import v from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var o="#4fa94d",i={"aria-busy":true,role:"progressbar"};var n=v.div`
display: ${r=>r.$visible?"flex":"none"};
`;var s="http://www.w3.org/2000/svg";var x=({radius:r=45,strokeWidth:a=5,color:t=o,secondaryColor:l,ariaLabel:p="revolving-dot-loading",wrapperStyle:c,wrapperClass:g,visible:m=true})=>jsx(n,{style:c,$visible:m,className:g,"aria-label":p,"data-testid":"revolving-dot-loading",...i,children:jsxs("svg",{version:"1.1",width:`calc(${r} * 2.5)`,height:`calc(${r} * 2.5)`,xmlns:s,x:"0px",y:"0px","data-testid":"revolving-dot-svg",children:[jsx("circle",{fill:"none",stroke:l||t,strokeWidth:a,cx:`calc(${r} * 1.28)`,cy:`calc(${r} * 1.28)`,r,style:{opacity:.5}}),jsx("circle",{fill:t,stroke:t,strokeWidth:"3",cx:`calc(${r} * 1.28)`,cy:`calc(${r} / 3.5)`,r:`calc(${r} / 5)`,style:{transformOrigin:"50% 50%"},children:jsx("animateTransform",{attributeName:"transform",dur:"2s",type:"rotate",from:"0",to:"360",repeatCount:"indefinite"})})]})});
export{x as RevolvingDot};//# sourceMappingURL=revolving-dot.mjs.map
//# sourceMappingURL=revolving-dot.mjs.map