react-loader-spinner/dist/rotating-square.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 i="#4fa94d",o={"aria-busy":true,role:"progressbar"};var a=d.div`
  display: ${e=>e.$visible?"flex":"none"};
`;var n="http://www.w3.org/2000/svg";var w=({wrapperClass:e="",color:t=i,height:s=100,width:p=100,strokeWidth:g=4,ariaLabel:l="rotating-square-loading",wrapperStyle:m={},visible:b=true})=>jsx(a,{style:m,$visible:b,className:e,"data-testid":"rotating-square-wrapper","aria-label":l,...o,children:jsxs("svg",{version:"1.1",xmlns:n,x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",height:`${s}`,width:`${p}`,"data-testid":"rotating-square-svg",xmlSpace:"preserve",children:[jsx("rect",{fill:"none",stroke:t,strokeWidth:g,x:"25",y:"25",width:"50",height:"50",children:jsx("animateTransform",{attributeName:"transform",dur:"0.5s",from:"0 50 50",to:"180 50 50",type:"rotate",id:"strokeBox",attributeType:"XML",begin:"rectBox.end"})}),jsx("rect",{x:"27",y:"27",fill:t,width:"46",height:"50",children:jsx("animate",{attributeName:"height",dur:"1.3s",attributeType:"XML",from:"50",to:"0",id:"rectBox",fill:"freeze",begin:"0s;strokeBox.end"})})]})});
export{w as RotatingSquare};//# sourceMappingURL=rotating-square.mjs.map
//# sourceMappingURL=rotating-square.mjs.map