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 2.77 kB
'use strict';var c=require('styled-components'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var c__default=/*#__PURE__*/_interopDefault(c);var r="#4fa94d",a={"aria-busy":true,role:"progressbar"};var n=c__default.default.div` display: ${i=>i.$visible?"flex":"none"}; `;var s="http://www.w3.org/2000/svg";var x=({height:i=80,width:o=80,color:l=r,ariaLabel:p="bars-loading",wrapperStyle:d,wrapperClass:u,visible:g=true})=>jsxRuntime.jsx(n,{$visible:g,style:{...d},className:u,"data-testid":"bars-loading","aria-label":p,...a,children:jsxRuntime.jsxs("svg",{width:o,height:i,fill:l,viewBox:"0 0 135 140",xmlns:s,"data-testid":"bars-svg",children:[jsxRuntime.jsxs("rect",{y:"10",width:"15",height:"120",rx:"6",children:[jsxRuntime.jsx("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]}),jsxRuntime.jsxs("rect",{x:"30",y:"10",width:"15",height:"120",rx:"6",children:[jsxRuntime.jsx("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]}),jsxRuntime.jsxs("rect",{x:"60",width:"15",height:"140",rx:"6",children:[jsxRuntime.jsx("animate",{attributeName:"height",begin:"0s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"y",begin:"0s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]}),jsxRuntime.jsxs("rect",{x:"90",y:"10",width:"15",height:"120",rx:"6",children:[jsxRuntime.jsx("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]}),jsxRuntime.jsxs("rect",{x:"120",y:"10",width:"15",height:"120",rx:"6",children:[jsxRuntime.jsx("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),jsxRuntime.jsx("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]})]})}); exports.Bars=x;//# sourceMappingURL=bars.cjs.map //# sourceMappingURL=bars.cjs.map