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 • 2.14 kB
JavaScript
'use strict';var b=require('styled-components'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var b__default=/*#__PURE__*/_interopDefault(b);var a="#4fa94d",n={"aria-busy":true,role:"progressbar"};var l=b__default.default.div`
display: ${t=>t.$visible?"flex":"none"};
`;var o="http://www.w3.org/2000/svg";var y=({height:t=100,width:s=100,radius:i=5,color:c=a,ariaLabel:p="ball-triangle-loading",wrapperClass:g,wrapperStyle:m,visible:d=true})=>jsxRuntime.jsx(l,{style:{...m},$visible:d,className:g,"data-testid":"ball-triangle-loading","aria-label":p,...n,children:jsxRuntime.jsxs("svg",{height:t,width:s,stroke:c,viewBox:"0 0 57 57",xmlns:o,"data-testid":"ball-triangle-svg",children:[jsxRuntime.jsx("title",{children:"Ball Triangle"}),jsxRuntime.jsx("desc",{children:"Animated representation of three balls"}),jsxRuntime.jsx("g",{fill:"none",fillRule:"evenodd",children:jsxRuntime.jsxs("g",{transform:"translate(1 1)",strokeWidth:"2",children:[jsxRuntime.jsxs("circle",{cx:"5",cy:"50",r:i,children:[jsxRuntime.jsx("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;5;50;50",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",values:"5;27;49;5",calcMode:"linear",repeatCount:"indefinite"})]}),jsxRuntime.jsxs("circle",{cx:"27",cy:"5",r:i,children:[jsxRuntime.jsx("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",from:"5",to:"5",values:"5;50;50;5",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",from:"27",to:"27",values:"27;49;5;27",calcMode:"linear",repeatCount:"indefinite"})]}),jsxRuntime.jsxs("circle",{cx:"49",cy:"50",r:i,children:[jsxRuntime.jsx("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;50;5;50",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"cx",from:"49",to:"49",begin:"0s",dur:"2.2s",values:"49;5;27;49",calcMode:"linear",repeatCount:"indefinite"})]})]})})]})});
exports.BallTriangle=y;//# sourceMappingURL=ball-triangle.cjs.map
//# sourceMappingURL=ball-triangle.cjs.map