react-loader-spinner/dist/color-ring.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 {jsxs,jsx}from'react/jsx-runtime';var i={"aria-busy":true,role:"progressbar"};var p=({visible:a=true,width:n="80",height:s="80",colors:t=["#e15b64","#f47e60","#f8b26a","#abbd81","#849b87"],wrapperClass:o="",wrapperStyle:l={},ariaLabel:m="color-ring-loading"})=>a?jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",width:n,height:s,viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid",className:o,style:l,"aria-label":m,"data-testid":"color-ring-svg",...i,children:[jsx("defs",{children:jsx("mask",{id:"ldio-4offds5dlws-mask",children:jsx("circle",{cx:"50",cy:"50",r:"26",stroke:"#fff",strokeLinecap:"round",strokeDasharray:"122.52211349000194 40.840704496667314",strokeWidth:"9",transform:"rotate(198.018 50 50)",children:jsx("animateTransform",{attributeName:"transform",type:"rotate",values:"0 50 50;360 50 50",keyTimes:"0;1",dur:"1s",repeatCount:"indefinite"})})})}),jsxs("g",{mask:"url(#ldio-4offds5dlws-mask)",children:[jsx("rect",{x:"14.5",y:"0",width:"15",height:"100",fill:t[0],children:jsx("animate",{attributeName:"fill",values:t.join(";").toString(),keyTimes:"0;0.25;0.5;0.75;1",dur:"1s",repeatCount:"indefinite",begin:"-0.8s"})}),jsx("rect",{x:"28.5",y:"0",width:"15",height:"100",fill:t[1],children:jsx("animate",{attributeName:"fill",values:t.join(";").toString(),keyTimes:"0;0.25;0.5;0.75;1",dur:"1s",repeatCount:"indefinite",begin:"-0.6s"})}),jsx("rect",{x:"42.5",y:"0",width:"15",height:"100",fill:t[2],children:jsx("animate",{attributeName:"fill",values:t.join(";").toString(),keyTimes:"0;0.25;0.5;0.75;1",dur:"1s",repeatCount:"indefinite",begin:"-0.4s"})}),jsx("rect",{x:"56.5",y:"0",width:"15",height:"100",fill:t[3],children:jsx("animate",{attributeName:"fill",values:t.join(";").toString(),keyTimes:"0;0.25;0.5;0.75;1",dur:"1s",repeatCount:"indefinite",begin:"-0.2s"})}),jsx("rect",{x:"70.5",y:"0",width:"15",height:"100",fill:t[4],children:jsx("animate",{attributeName:"fill",values:t.join(";").toString(),keyTimes:"0;0.25;0.5;0.75;1",dur:"1s",repeatCount:"indefinite",begin:"0s"})})]})]}):null;
export{p as ColorRing};//# sourceMappingURL=color-ring.mjs.map
//# sourceMappingURL=color-ring.mjs.map