UNPKG

react-loader-spinner

Version:

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

5 lines 3.49 kB
'use strict';var A=require('styled-components'),react=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var A__default=/*#__PURE__*/_interopDefault(A);var c="#4fa94d",f={"aria-busy":true,role:"progressbar"};var g=A__default.default.div` display: ${e=>e.$visible?"flex":"none"}; `;var u="http://www.w3.org/2000/svg";var b=({colors:e,gradientType:o="linear",gradientAngle:s=0})=>{let i=!!e&&e.length>1,r=react.useMemo(()=>i?`rls-grad-${Math.random().toString(36).slice(2,8)}`:void 0,[i]),p=react.useMemo(()=>!i||!r||!e?null:o==="radial"?jsxRuntime.jsx("radialGradient",{id:r,cx:"50%",cy:"50%",r:"50%",children:e.map((n,a)=>jsxRuntime.jsx("stop",{offset:`${a/(e.length-1)*100}%`,stopColor:n},n+a))}):jsxRuntime.jsx("linearGradient",{id:r,x1:"0%",y1:"0%",x2:"100%",y2:"0%",gradientTransform:`rotate(${s})`,children:e.map((n,a)=>jsxRuntime.jsx("stop",{offset:`${a/(e.length-1)*100}%`,stopColor:n},n+a))}),[e,s,r,o,i]),d=r?`url(#${r})`:void 0;return {isGradient:i,gradientId:r,defs:p,url:d}};var I=({height:e=80,width:o=80,color:s=c,colors:i,gradientType:r,gradientAngle:p,ariaLabel:d="circles-loading",wrapperStyle:n,wrapperClass:a,visible:S=true})=>{let{defs:m,url:h}=b({colors:i,gradientType:r,gradientAngle:p});return jsxRuntime.jsx(g,{style:n,$visible:S,className:a,"aria-label":d,"data-testid":"circles-loading",...f,children:jsxRuntime.jsxs("svg",{width:o,height:e,viewBox:"0 0 135 135",xmlns:u,fill:h||s,"data-testid":"circles-svg",children:[m&&jsxRuntime.jsx("defs",{children:m}),jsxRuntime.jsx("title",{children:"circles-loading"}),jsxRuntime.jsx("desc",{children:"Animated representation of circles"}),jsxRuntime.jsx("path",{d:"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"-360 67 67",dur:"2.5s",repeatCount:"indefinite"})}),jsxRuntime.jsx("path",{d:"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z",children:jsxRuntime.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"360 67 67",dur:"8s",repeatCount:"indefinite"})})]})})}; exports.Circles=I;//# sourceMappingURL=circles.cjs.map //# sourceMappingURL=circles.cjs.map