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.

4 lines 1.97 kB
'use strict';var d=require('styled-components'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var d__default=/*#__PURE__*/_interopDefault(d);var t="#4fa94d",a={"aria-busy":true,role:"progressbar"};var n=d__default.default.div` display: ${r=>r.$visible?"flex":"none"}; `;var T=({height:r=90,width:s=80,radius:o=12.5,color:l=t,secondaryColor:p=t,ariaLabel:g="mutating-dots-loading",wrapperStyle:m,wrapperClass:c,visible:u=true})=>jsxRuntime.jsx(n,{style:m,$visible:u,className:c,"data-testid":"mutating-dots-loading","aria-label":g,...a,children:jsxRuntime.jsxs("svg",{id:"goo-loader",width:s,height:r,"data-testid":"mutating-dots-svg",children:[jsxRuntime.jsxs("filter",{id:"fancy-goo",children:[jsxRuntime.jsx("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"6",result:"blur"}),jsxRuntime.jsx("feColorMatrix",{in:"blur",mode:"matrix",values:"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9",result:"goo"}),jsxRuntime.jsx("feComposite",{in:"SourceGraphic",in2:"goo",operator:"atop"})]}),jsxRuntime.jsxs("g",{filter:"url(#fancy-goo)",children:[jsxRuntime.jsx("animateTransform",{id:"mainAnim",attributeName:"transform",attributeType:"XML",type:"rotate",from:"0 50 50",to:"359 50 50",dur:"1.2s",repeatCount:"indefinite"}),jsxRuntime.jsx("circle",{cx:"50%",cy:"40",r:o,fill:l,children:jsxRuntime.jsx("animate",{id:"cAnim1",attributeType:"XML",attributeName:"cy",dur:"0.6s",begin:"0;cAnim1.end+0.2s",calcMode:"spline",values:"40;20;40",keyTimes:"0;0.3;1",keySplines:"0.09, 0.45, 0.16, 1;0.09, 0.45, 0.16, 1"})}),jsxRuntime.jsx("circle",{cx:"50%",cy:"60",r:o,fill:p,children:jsxRuntime.jsx("animate",{id:"cAnim2",attributeType:"XML",attributeName:"cy",dur:"0.6s",begin:"0.4s;cAnim2.end+0.2s",calcMode:"spline",values:"60;80;60",keyTimes:"0;0.3;1",keySplines:"0.09, 0.45, 0.16, 1;0.09, 0.45, 0.16, 1"})})]})]})});exports.MutatingDots=T;//# sourceMappingURL=mutating-dots.cjs.map //# sourceMappingURL=mutating-dots.cjs.map