react-loader-spinner/dist/circles-with-bar.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 h from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var i="#4fa94d",a={"aria-busy":true,role:"progressbar"};var n=h.div`
  display: ${e=>e.$visible?"flex":"none"};
`;var s="http://www.w3.org/2000/svg";var A=({wrapperStyle:e={},visible:l=true,wrapperClass:p="",height:m=100,width:c=100,color:t=i,outerCircleColor:g,innerCircleColor:d,barColor:b,ariaLabel:u="circles-with-bar-loading"})=>jsx(n,{style:e,$visible:l,className:p,"aria-label":u,...a,"data-testid":"circles-with-bar-wrapper",children:jsxs("svg",{version:"1.1",id:"L1",xmlns:s,x:"0px",y:"0px",height:`${m}`,width:`${c}`,viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve","data-testid":"circles-with-bar-svg",children:[jsx("title",{children:"circles-with-bar-loading"}),jsx("desc",{children:"Animated representation of circles with bar"}),jsx("circle",{fill:"none",stroke:`${g||t}`,strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),jsx("circle",{fill:"none",stroke:`${d||t}`,strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),jsxs("g",{fill:`${b||t}`,"data-testid":"circles-with-bar-svg-bar",children:[jsx("rect",{x:"30",y:"35",width:"5",height:"30",children:jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),jsx("rect",{x:"40",y:"35",width:"5",height:"30",children:jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),jsx("rect",{x:"50",y:"35",width:"5",height:"30",children:jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),jsx("rect",{x:"60",y:"35",width:"5",height:"30",children:jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),jsx("rect",{x:"70",y:"35",width:"5",height:"30",children:jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]})});
export{A as CirclesWithBar};//# sourceMappingURL=circles-with-bar.mjs.map
//# sourceMappingURL=circles-with-bar.mjs.map