react-loader-spinner/dist/bars.mjs

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

import c from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var r="#4fa94d",a={"aria-busy":true,role:"progressbar"};var n=c.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})=>jsx(n,{$visible:g,style:{...d},className:u,"data-testid":"bars-loading","aria-label":p,...a,children:jsxs("svg",{width:o,height:i,fill:l,viewBox:"0 0 135 140",xmlns:s,"data-testid":"bars-svg",children:[jsxs("rect",{y:"10",width:"15",height:"120",rx:"6",children:[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"}),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"})]}),jsxs("rect",{x:"30",y:"10",width:"15",height:"120",rx:"6",children:[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"}),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"})]}),jsxs("rect",{x:"60",width:"15",height:"140",rx:"6",children:[jsx("animate",{attributeName:"height",begin:"0s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),jsx("animate",{attributeName:"y",begin:"0s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]}),jsxs("rect",{x:"90",y:"10",width:"15",height:"120",rx:"6",children:[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"}),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"})]}),jsxs("rect",{x:"120",y:"10",width:"15",height:"120",rx:"6",children:[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"}),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"})]})]})});
export{x as Bars};//# sourceMappingURL=bars.mjs.map
//# sourceMappingURL=bars.mjs.map