react-loader-spinner/dist/circular-progress.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 b from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var i="#4fa94d",o={"aria-busy":true,role:"progressbar"};var s=b.div`
  display: ${e=>e.$visible?"flex":"none"};
`;var a="http://www.w3.org/2000/svg";var w=({height:e="100",width:n="100",color:t=i,secondaryColor:l,ariaLabel:p="circular-progress-loading",wrapperStyle:g={},wrapperClass:d,visible:m=true,strokeWidth:c=2,animationDuration:u=1})=>jsx(s,{$visible:m,style:{...g},className:d,"data-testid":"circular-progress-loading","aria-label":p,...o,children:jsxs("svg",{height:`${e}`,width:`${n}`,fill:"none",viewBox:"0 0 16 16",xmlns:a,"data-testid":"circular-progress-svg",style:{animation:`spin ${u}s linear infinite`},children:[jsx("title",{children:"Circular Progress"}),jsx("desc",{children:"Animated circular progress indicator"}),jsx("style",{children:`
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
        `}),jsx("path",{fill:"none",stroke:l||t,strokeWidth:c,d:"M3.05 3.05a7 7 0 1 1 9.9 9.9 7 7 0 0 1-9.9-9.9Z",opacity:"0.5"}),jsx("path",{fill:t,fillRule:"evenodd",d:"M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z",clipRule:"evenodd"}),jsx("path",{fill:t,d:"M14 8a6 6 0 0 0-6-6V0a8 8 0 0 1 8 8h-2Z"})]})});export{w as CircularProgress};//# sourceMappingURL=circular-progress.mjs.map
//# sourceMappingURL=circular-progress.mjs.map