react-loader-spinner/dist/rotating-lines.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 react=require('react'),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 l="#4fa94d",n={"aria-busy":true,role:"progressbar"};var c="http://www.w3.org/2000/svg";var g=h__default.default.div`
  display: ${t=>t.$visible?"flex":"none"};
`;var f=[0,30,60,90,120,150,180,210,240,270,300,330],A=h.keyframes`
to {
   transform: rotate(360deg);
 }
`,v=h__default.default.svg`
  animation: ${A} ${t=>String(t.$animationDuration).endsWith("s")?String(t.$animationDuration):`${t.$animationDuration}s`} steps(12, end) infinite;
`,w=h__default.default.polyline`
  stroke-width: ${t=>`${t.$strokeWidth}px`};
  stroke-linecap: round;

  &:nth-child(12n + 0) {
    stroke-opacity: 0.08;
  }

  &:nth-child(12n + 1) {
    stroke-opacity: 0.17;
  }

  &:nth-child(12n + 2) {
    stroke-opacity: 0.25;
  }

  &:nth-child(12n + 3) {
    stroke-opacity: 0.33;
  }

  &:nth-child(12n + 4) {
    stroke-opacity: 0.42;
  }

  &:nth-child(12n + 5) {
    stroke-opacity: 0.5;
  }

  &:nth-child(12n + 6) {
    stroke-opacity: 0.58;
  }

  &:nth-child(12n + 7) {
    stroke-opacity: 0.66;
  }

  &:nth-child(12n + 8) {
    stroke-opacity: 0.75;
  }

  &:nth-child(12n + 9) {
    stroke-opacity: 0.83;
  }

  &:nth-child(12n + 11) {
    stroke-opacity: 0.92;
  }
`,F=({height:t=96,width:m=96,color:d=l,strokeWidth:e=5,animationDuration:o=.75,strokeColor:i,visible:s=true,ariaLabel:a="rotating-lines-loading",wrapperStyle:S,wrapperClass:y})=>{let u=react.useCallback(()=>f.map(p=>jsxRuntime.jsx(w,{points:"24,12 24,4",$strokeWidth:e,transform:`rotate(${p}, 24, 24)`},p)),[e]);return s?jsxRuntime.jsx(g,{style:S,$visible:s,className:y,"aria-label":a,"data-testid":"rotating-lines-loading",...n,children:jsxRuntime.jsx(v,{xmlns:c,viewBox:"0 0 48 48",width:m,height:t,stroke:i!=null?i:d,$animationDuration:o,speed:String(o),"aria-label":a,"data-testid":"rotating-lines-svg",...n,children:u()})}):null};exports.RotatingLines=F;//# sourceMappingURL=rotating-lines.cjs.map
//# sourceMappingURL=rotating-lines.cjs.map