UNPKG

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.47 kB
'use strict';var d=require('styled-components'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var d__default=/*#__PURE__*/_interopDefault(d);var i="#4fa94d",o={"aria-busy":true,role:"progressbar"};var a=d__default.default.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})=>jsxRuntime.jsx(a,{style:m,$visible:b,className:e,"data-testid":"rotating-square-wrapper","aria-label":l,...o,children:jsxRuntime.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:[jsxRuntime.jsx("rect",{fill:"none",stroke:t,strokeWidth:g,x:"25",y:"25",width:"50",height:"50",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",dur:"0.5s",from:"0 50 50",to:"180 50 50",type:"rotate",id:"strokeBox",attributeType:"XML",begin:"rectBox.end"})}),jsxRuntime.jsx("rect",{x:"27",y:"27",fill:t,width:"46",height:"50",children:jsxRuntime.jsx("animate",{attributeName:"height",dur:"1.3s",attributeType:"XML",from:"50",to:"0",id:"rectBox",fill:"freeze",begin:"0s;strokeBox.end"})})]})}); exports.RotatingSquare=w;//# sourceMappingURL=rotating-square.cjs.map //# sourceMappingURL=rotating-square.cjs.map