react-loader-spinner/dist/circles-with-bar.cjs

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

'use strict';var h=require('styled-components'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var h__default=/*#__PURE__*/_interopDefault(h);var i="#4fa94d",a={"aria-busy":true,role:"progressbar"};var n=h__default.default.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"})=>jsxRuntime.jsx(n,{style:e,$visible:l,className:p,"aria-label":u,...a,"data-testid":"circles-with-bar-wrapper",children:jsxRuntime.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:[jsxRuntime.jsx("title",{children:"circles-with-bar-loading"}),jsxRuntime.jsx("desc",{children:"Animated representation of circles with bar"}),jsxRuntime.jsx("circle",{fill:"none",stroke:`${g||t}`,strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),jsxRuntime.jsx("circle",{fill:"none",stroke:`${d||t}`,strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),jsxRuntime.jsxs("g",{fill:`${b||t}`,"data-testid":"circles-with-bar-svg-bar",children:[jsxRuntime.jsx("rect",{x:"30",y:"35",width:"5",height:"30",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),jsxRuntime.jsx("rect",{x:"40",y:"35",width:"5",height:"30",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),jsxRuntime.jsx("rect",{x:"50",y:"35",width:"5",height:"30",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),jsxRuntime.jsx("rect",{x:"60",y:"35",width:"5",height:"30",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),jsxRuntime.jsx("rect",{x:"70",y:"35",width:"5",height:"30",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]})});
exports.CirclesWithBar=A;//# sourceMappingURL=circles-with-bar.cjs.map
//# sourceMappingURL=circles-with-bar.cjs.map