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.
3 lines • 11.9 kB
JavaScript
import u from'tinycolor2';import {jsxs,jsx}from'react/jsx-runtime';var r={"aria-busy":true,role:"progressbar"};var m="http://www.w3.org/2000/svg";var $=({visible:l=true,width:c="80",height:b="80",wrapperClass:p="",wrapperStyle:y={},ariaLabel:f="dna-loading",dnaColorOne:i="rgba(233, 12, 89, 0.51)",dnaColorTwo:t="#46dff0"})=>{let n=u(i).lighten(15).setAlpha(1).toRgbString(),s=u(t).desaturate(60).setAlpha(.15).toRgbString();return l?jsxs("svg",{xmlns:m,width:c,height:b,viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid",className:p,style:y,"aria-label":f,"data-testid":"dna-svg",...r,children:[jsxs("circle",{cx:"6.451612903225806",cy:"60.6229",r:"3.41988",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-0.5s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"0s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-0.5s"})]}),jsxs("circle",{cx:"6.451612903225806",cy:"39.3771",r:"2.58012",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-1.5s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-0.5s"})]}),jsxs("circle",{cx:"16.129032258064512",cy:"68.1552",r:"3.17988",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-0.7s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-0.2s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-0.7s"})]}),jsxs("circle",{cx:"16.129032258064512",cy:"31.8448",r:"2.82012",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-1.7s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1.2s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-0.7s"})]}),jsxs("circle",{cx:"25.806451612903224",cy:"69.3634",r:"2.93988",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-0.9s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-0.4s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-0.9s"})]}),jsxs("circle",{cx:"25.806451612903224",cy:"30.6366",r:"3.06012",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-1.9s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1.4s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-0.9s"})]}),jsxs("circle",{cx:"35.48387096774193",cy:"65.3666",r:"2.69988",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-1.1s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-0.6s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-1.1s"})]}),jsxs("circle",{cx:"35.48387096774193",cy:"34.6334",r:"3.30012",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-2.1s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1.6s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-1.1s"})]}),jsxs("circle",{cx:"45.16129032258064",cy:"53.8474",r:"2.45988",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-1.3s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-0.8s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-1.3s"})]}),jsxs("circle",{cx:"45.16129032258064",cy:"46.1526",r:"3.54012",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-2.3s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1.8s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-1.3s"})]}),jsxs("circle",{cx:"54.838709677419345",cy:"39.3771",r:"2.58012",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-1.5s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-1.5s"})]}),jsxs("circle",{cx:"54.838709677419345",cy:"60.6229",r:"3.41988",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-2.5s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-2s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-1.5s"})]}),jsxs("circle",{cx:"64.51612903225805",cy:"31.8448",r:"2.82012",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-1.7s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1.2s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-1.7s"})]}),jsxs("circle",{cx:"64.51612903225805",cy:"68.1552",r:"3.17988",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-2.7s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-2.2s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-1.7s"})]}),jsxs("circle",{cx:"74.19354838709677",cy:"30.6366",r:"3.06012",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-1.9s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1.4s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-1.9s"})]}),jsxs("circle",{cx:"74.19354838709677",cy:"69.3634",r:"2.93988",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-2.9s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-2.4s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-1.9s"})]}),jsxs("circle",{cx:"83.87096774193547",cy:"34.6334",r:"3.30012",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-2.1s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1.6s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-2.1s"})]}),jsxs("circle",{cx:"83.87096774193547",cy:"65.3666",r:"2.69988",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-3.1s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-2.6s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-2.1s"})]}),jsxs("circle",{cx:"93.54838709677418",cy:"46.1526",r:"3.54012",fill:i,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-2.3s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-1.8s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${i};${n};${i}`,dur:"2s",repeatCount:"indefinite",begin:"-2.3s"})]}),jsxs("circle",{cx:"93.54838709677418",cy:"53.8474",r:"2.45988",fill:t,children:[jsx("animate",{attributeName:"r",keyTimes:"0;0.5;1",values:"2.4000000000000004;3.5999999999999996;2.4000000000000004",dur:"2s",repeatCount:"indefinite",begin:"-3.3s"}),jsx("animate",{attributeName:"cy",keyTimes:"0;0.5;1",values:"30.5;69.5;30.5",dur:"2s",repeatCount:"indefinite",begin:"-2.8s",keySplines:"0.5 0 0.5 1;0.5 0 0.5 1",calcMode:"spline"}),jsx("animate",{attributeName:"fill",keyTimes:"0;0.5;1",values:`${t};${s};${t}`,dur:"2s",repeatCount:"indefinite",begin:"-2.3s"})]})]}):null};
export{$ as DNA};//# sourceMappingURL=dna.mjs.map
//# sourceMappingURL=dna.mjs.map