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.73 kB
JavaScript
'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 s="#4fa94d",n={"aria-busy":true,role:"progressbar"};var o=d__default.default.div`
display: ${r=>r.$visible?"flex":"none"};
`;var a="http://www.w3.org/2000/svg";var T=({height:r=80,width:p=80,radius:t=1,color:l=s,ariaLabel:g="puff-loading",wrapperStyle:c,wrapperClass:m,visible:u=true})=>jsxRuntime.jsx(o,{style:c,$visible:u,className:m,"data-testid":"puff-loading","aria-label":g,...n,children:jsxRuntime.jsx("svg",{width:p,height:r,viewBox:"0 0 44 44",xmlns:a,stroke:l,"data-testid":"puff-svg",children:jsxRuntime.jsxs("g",{fill:"none",fillRule:"evenodd",strokeWidth:"2",children:[jsxRuntime.jsxs("circle",{cx:"22",cy:"22",r:t,children:[jsxRuntime.jsx("animate",{attributeName:"r",begin:"0s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"strokeOpacity",begin:"0s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})]}),jsxRuntime.jsxs("circle",{cx:"22",cy:"22",r:t,children:[jsxRuntime.jsx("animate",{attributeName:"r",begin:"-0.9s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"strokeOpacity",begin:"-0.9s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})]})]})})});
exports.Puff=T;//# sourceMappingURL=puff.cjs.map
//# sourceMappingURL=puff.cjs.map