react-loader-spinner/dist/grid.cjs

react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.

'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 t="#4fa94d",a={"aria-busy":true,role:"progressbar"};var l=d__default.default.div`
  display: ${r=>r.$visible?"flex":"none"};
`;var C=({height:r=80,width:n=80,radius:i=12.5,color:c=t,ariaLabel:o="grid-loading",wrapperStyle:s,wrapperClass:p,visible:m=true})=>jsxRuntime.jsx(l,{style:s,$visible:m,className:p,"data-testid":"grid-loading","aria-label":o,...a,children:jsxRuntime.jsxs("svg",{width:n,height:r,viewBox:"0 0 105 105",fill:c,"data-testid":"grid-svg",children:[jsxRuntime.jsx("circle",{cx:"12.5",cy:"12.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{cx:"12.5",cy:"52.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"100ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{cx:"52.5",cy:"12.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"300ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{cx:"52.5",cy:"52.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"600ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{cx:"92.5",cy:"12.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"800ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{cx:"92.5",cy:"52.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"400ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{cx:"12.5",cy:"92.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"700ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{cx:"52.5",cy:"92.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"500ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{cx:"92.5",cy:"92.5",r:`${i}`,children:jsxRuntime.jsx("animate",{attributeName:"fill-opacity",begin:"200ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})})]})});exports.Grid=C;//# sourceMappingURL=grid.cjs.map
//# sourceMappingURL=grid.cjs.map