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.
1,104 lines (1,021 loc) • 161 kB
JavaScript
import {jsx as $fJU0O$jsx, jsxs as $fJU0O$jsxs} from "react/jsx-runtime";
import {useCallback as $fJU0O$useCallback} from "react";
import $fJU0O$styledcomponents, {keyframes as $fJU0O$keyframes} from "styled-components";
// Such export is called Tree Shaking. It allows to import only the components
// that are needed while webpack will remove the rest of the code from the bundle.
const $84fda1e7e33cfd28$export$37394b0fa44b998c = "#4fa94d";
const $84fda1e7e33cfd28$export$6bfda33bcd6c2d18 = {
"aria-busy": true,
role: "progressbar"
};
const $4c3f0b77e8caf06d$export$21d9f1931ef75b56 = (0, $fJU0O$styledcomponents).div`
display: ${(props)=>props.$visible ? "flex" : "none"};
`;
const $eb040f10400edc38$export$98a285aab16ab26c = "http://www.w3.org/2000/svg";
const $dcdd04c60cd78d69$export$153755f98d9861de = ({ height: height = "100", width: width = "100", color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "audio-loading", wrapperStyle: wrapperStyle = {}, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
$visible: visible,
style: {
...wrapperStyle
},
className: wrapperClass,
"data-testid": "audio-loading",
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
height: `${height}`,
width: `${width}`,
fill: color,
viewBox: "0 0 55 80",
xmlns: (0, $eb040f10400edc38$export$98a285aab16ab26c),
"data-testid": "audio-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("title", {
children: "Audio Visualization"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("desc", {
children: "Animated representation of audio data"
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("g", {
transform: "matrix(1 0 0 -1 0 80)",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
width: "10",
height: "20",
rx: "3",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0s",
dur: "4.3s",
values: "20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "15",
width: "10",
height: "80",
rx: "3",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0s",
dur: "2s",
values: "80;55;33;5;75;23;73;33;12;14;60;80",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "30",
width: "10",
height: "50",
rx: "3",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0s",
dur: "1.4s",
values: "50;34;78;23;56;23;34;76;80;54;21;50",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "45",
width: "10",
height: "30",
rx: "3",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0s",
dur: "2s",
values: "30;45;13;80;56;72;45;76;34;23;67;30",
calcMode: "linear",
repeatCount: "indefinite"
})
})
]
})
]
})
});
const $e035d01ad1d05b44$export$68949ad0373623af = ({ height: height = 100, width: width = 100, radius: radius = 5, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "ball-triangle-loading", wrapperClass: wrapperClass, wrapperStyle: wrapperStyle, visible: visible = true })=>/*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
style: {
...wrapperStyle
},
$visible: visible,
className: wrapperClass,
"data-testid": "ball-triangle-loading",
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
height: height,
width: width,
stroke: color,
viewBox: "0 0 57 57",
xmlns: (0, $eb040f10400edc38$export$98a285aab16ab26c),
"data-testid": "ball-triangle-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("title", {
children: "Ball Triangle"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("desc", {
children: "Animated representation of three balls"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("g", {
fill: "none",
fillRule: "evenodd",
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("g", {
transform: "translate(1 1)",
strokeWidth: "2",
children: [
/*#__PURE__*/ (0, $fJU0O$jsxs)("circle", {
cx: "5",
cy: "50",
r: radius,
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;5;50;50",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
values: "5;27;49;5",
calcMode: "linear",
repeatCount: "indefinite"
})
]
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("circle", {
cx: "27",
cy: "5",
r: radius,
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
from: "5",
to: "5",
values: "5;50;50;5",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
from: "27",
to: "27",
values: "27;49;5;27",
calcMode: "linear",
repeatCount: "indefinite"
})
]
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("circle", {
cx: "49",
cy: "50",
r: radius,
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;50;5;50",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "cx",
from: "49",
to: "49",
begin: "0s",
dur: "2.2s",
values: "49;5;27;49",
calcMode: "linear",
repeatCount: "indefinite"
})
]
})
]
})
})
]
})
});
const $7dd1b251b360e95a$export$fbc7d6f7dd821b47 = ({ height: height = 80, width: width = 80, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "bars-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
$visible: visible,
style: {
...wrapperStyle
},
className: wrapperClass,
"data-testid": "bars-loading",
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
width: width,
height: height,
fill: color,
viewBox: "0 0 135 140",
xmlns: (0, $eb040f10400edc38$export$98a285aab16ab26c),
"data-testid": "bars-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsxs)("rect", {
y: "10",
width: "15",
height: "120",
rx: "6",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("rect", {
x: "30",
y: "10",
width: "15",
height: "120",
rx: "6",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("rect", {
x: "60",
width: "15",
height: "140",
rx: "6",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("rect", {
x: "90",
y: "10",
width: "15",
height: "120",
rx: "6",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("rect", {
x: "120",
y: "10",
width: "15",
height: "120",
rx: "6",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
})
]
})
});
const $29b6b1f956162f74$export$765808835a2dc0a2 = ({ height: height = 80, width: width = 80, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "circles-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"aria-label": ariaLabel,
"data-testid": "circles-loading",
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
width: width,
height: height,
viewBox: "0 0 135 135",
xmlns: (0, $eb040f10400edc38$export$98a285aab16ab26c),
fill: color,
"data-testid": "circles-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("title", {
children: "circles-loading"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("desc", {
children: "Animated representation of circles"
}),
/*#__PURE__*/ (0, $fJU0O$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: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "-360 67 67",
dur: "2.5s",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$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: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "360 67 67",
dur: "8s",
repeatCount: "indefinite"
})
})
]
})
});
const $12bd062f0f060b07$export$17c11650828d97e = ({ wrapperStyle: wrapperStyle = {}, visible: visible = true, wrapperClass: wrapperClass = "", height: height = 100, width: width = 100, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), outerCircleColor: outerCircleColor, innerCircleColor: innerCircleColor, barColor: barColor, ariaLabel: ariaLabel = "circles-with-bar-loading" })=>{
return /*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
"data-testid": "circles-with-bar-wrapper",
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
version: "1.1",
id: "L1",
xmlns: (0, $eb040f10400edc38$export$98a285aab16ab26c),
x: "0px",
y: "0px",
height: `${height}`,
width: `${width}`,
viewBox: "0 0 100 100",
enableBackground: "new 0 0 100 100",
xmlSpace: "preserve",
"data-testid": "circles-with-bar-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("title", {
children: "circles-with-bar-loading"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("desc", {
children: "Animated representation of circles with bar"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
fill: "none",
stroke: `${outerCircleColor || color}`,
strokeWidth: "6",
strokeMiterlimit: "15",
strokeDasharray: "14.2472,14.2472",
cx: "50",
cy: "50",
r: "47",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
attributeType: "XML",
type: "rotate",
dur: "5s",
from: "0 50 50",
to: "360 50 50",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
fill: "none",
stroke: `${innerCircleColor || color}`,
strokeWidth: "1",
strokeMiterlimit: "10",
strokeDasharray: "10,10",
cx: "50",
cy: "50",
r: "39",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
attributeType: "XML",
type: "rotate",
dur: "5s",
from: "0 50 50",
to: "-360 50 50",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("g", {
fill: `${barColor || color}`,
"data-testid": "circles-with-bar-svg-bar",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "30",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.1"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "40",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.2"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "50",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.3"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "60",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.4"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "70",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.5"
})
})
]
})
]
})
});
};
const $b438e21e66fce243$export$ef2184bd89960b14 = ({ height: height = 80, width: width = 80, radius: radius = 12.5, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "grid-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "grid-loading",
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
width: width,
height: height,
viewBox: "0 0 105 105",
fill: color,
"data-testid": "grid-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "12.5",
cy: "12.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "12.5",
cy: "52.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "100ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "52.5",
cy: "12.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "300ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "52.5",
cy: "52.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "600ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "92.5",
cy: "12.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "800ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "92.5",
cy: "52.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "400ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "12.5",
cy: "92.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "700ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "52.5",
cy: "92.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "500ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "92.5",
cy: "92.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "200ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
})
]
})
});
const $88eb2f870dd9f437$export$2da2f0c7403af3ce = ({ height: height = 80, width: width = 80, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "hearts-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "hearts-loading",
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
width: width,
height: height,
viewBox: "0 0 140 64",
xmlns: "http://www.w3.org/2000/svg",
fill: color,
"data-testid": "hearts-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("path", {
d: "M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z",
attributeName: "fill-opacity",
from: "0",
to: ".5",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("path", {
d: "M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z",
attributeName: "fill-opacity",
from: "0",
to: ".5",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animate", {
attributeName: "fill-opacity",
begin: "0.7s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("path", {
d: "M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"
})
]
})
});
const $ad60b992c945fdb5$var$len = 242.776657104492;
const $ad60b992c945fdb5$var$time = 1.6;
const $ad60b992c945fdb5$var$anim = (0, $fJU0O$keyframes)`
12.5% {
stroke-dasharray: ${$ad60b992c945fdb5$var$len * 0.14}px, ${$ad60b992c945fdb5$var$len}px;
stroke-dashoffset: -${$ad60b992c945fdb5$var$len * 0.11}px;
}
43.75% {
stroke-dasharray: ${$ad60b992c945fdb5$var$len * 0.35}px, ${$ad60b992c945fdb5$var$len}px;
stroke-dashoffset: -${$ad60b992c945fdb5$var$len * 0.35}px;
}
100% {
stroke-dasharray: ${$ad60b992c945fdb5$var$len * 0.01}px, ${$ad60b992c945fdb5$var$len}px;
stroke-dashoffset: -${$ad60b992c945fdb5$var$len * 0.99}px;
}
`;
const $ad60b992c945fdb5$var$Path = (0, $fJU0O$styledcomponents).path`
stroke-dasharray: ${$ad60b992c945fdb5$var$len * 0.01}px, ${$ad60b992c945fdb5$var$len};
stroke-dashoffset: 0;
animation: ${$ad60b992c945fdb5$var$anim} ${$ad60b992c945fdb5$var$time}s linear infinite;
`;
const $ad60b992c945fdb5$export$8009d4483dfda42 = ({ color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), width: width = "200" })=>{
return /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
xmlns: (0, $eb040f10400edc38$export$98a285aab16ab26c),
width: `${width}`,
height: `${Number(width) * 0.5}`,
viewBox: `0 0 ${width} ${Number(100)}`,
"data-testid": "infinity-spin",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)($ad60b992c945fdb5$var$Path, {
"data-testid": "infinity-spin-path-1",
stroke: color,
fill: "none",
strokeWidth: "4",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeMiterlimit: "10",
d: "M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("path", {
"data-testid": "infinity-spin-path-2",
opacity: "0.07",
fill: "none",
stroke: color,
strokeWidth: "4",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeMiterlimit: "10",
d: "M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"
})
]
});
};
const $05da46d92e4baf0c$export$d2101d81f63866ab = ({ wrapperStyle: wrapperStyle = {}, visible: visible = true, wrapperClass: wrapperClass = "", height: height = 100, width: width = 100, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "line-wave-loading", firstLineColor: firstLineColor, middleLineColor: middleLineColor, lastLineColor: lastLineColor })=>{
return /*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "line-wave-wrapper",
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
version: "1.1",
height: `${height}`,
width: `${width}`,
xmlns: (0, $eb040f10400edc38$export$98a285aab16ab26c),
x: "0px",
y: "0px",
viewBox: "0 0 100 100",
enableBackground: "new 0 0 0 0",
xmlSpace: "preserve",
"data-testid": "line-wave-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "20",
y: "50",
width: "4",
height: "10",
fill: firstLineColor || color,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeType: "xml",
attributeName: "transform",
type: "translate",
values: "0 0; 0 20; 0 0",
begin: "0",
dur: "0.6s",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "30",
y: "50",
width: "4",
height: "10",
fill: middleLineColor || color,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeType: "xml",
attributeName: "transform",
type: "translate",
values: "0 0; 0 20; 0 0",
begin: "0.2s",
dur: "0.6s",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("rect", {
x: "40",
y: "50",
width: "4",
height: "10",
fill: lastLineColor || color,
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeType: "xml",
attributeName: "transform",
type: "translate",
values: "0 0; 0 20; 0 0",
begin: "0.4s",
dur: "0.6s",
repeatCount: "indefinite"
})
})
]
})
});
};
const $05cab5f4cf092036$export$64ea884904791f4 = ({ height: height = 90, width: width = 80, radius: radius = 12.5, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), secondaryColor: secondaryColor = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "mutating-dots-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "mutating-dots-loading",
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("svg", {
id: "goo-loader",
width: width,
height: height,
"data-testid": "mutating-dots-svg",
children: [
/*#__PURE__*/ (0, $fJU0O$jsxs)("filter", {
id: "fancy-goo",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "6",
result: "blur"
}),
/*#__PURE__*/ (0, $fJU0O$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"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("feComposite", {
in: "SourceGraphic",
in2: "goo",
operator: "atop"
})
]
}),
/*#__PURE__*/ (0, $fJU0O$jsxs)("g", {
filter: "url(#fancy-goo)",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
id: "mainAnim",
attributeName: "transform",
attributeType: "XML",
type: "rotate",
from: "0 50 50",
to: "359 50 50",
dur: "1.2s",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "50%",
cy: "40",
r: radius,
fill: color,
children: /*#__PURE__*/ (0, $fJU0O$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"
})
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
cx: "50%",
cy: "60",
r: radius,
fill: secondaryColor,
children: /*#__PURE__*/ (0, $fJU0O$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"
})
})
]
})
]
})
});
/**
* The radius of the circle
* The Loader size is set with the width and height of the SVG
* @type {number}
*/ const $a5fa864d4dd36deb$var$RADIUS = 20;
/**
* Compute Path depending on circle radius
* The structure with radius 20 is "M20 0c0-9.94-8.06-20-20-20"
* @param radius of the circle radius default 20
* @returns {string}
*/ const $a5fa864d4dd36deb$var$getPath = (radius)=>{
return [
"M" + radius + " 0c0-9.94-8.06",
radius,
radius,
radius
].join("-");
};
/**
* Compute the size of the view box depending on the radius and Stroke-Width
* @param strokeWidth Stroke-Width of the full circle
* @param secondaryStrokeWidth Stroke-Width of the 1/4 circle
* @param radius radius of the circle
* @returns {string}
*/ const $a5fa864d4dd36deb$var$getViewBoxSize = (strokeWidth, secondaryStrokeWidth, radius)=>{
const maxStrokeWidth = Math.max(strokeWidth, secondaryStrokeWidth);
const startingPoint = -radius - maxStrokeWidth / 2 + 1;
const endpoint = radius * 2 + maxStrokeWidth;
return [
startingPoint,
startingPoint,
endpoint,
endpoint
].join(" ");
};
const $a5fa864d4dd36deb$export$67ad50c48ca3ede4 = ({ height: height = 80, width: width = 80, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), secondaryColor: secondaryColor = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "oval-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true, strokeWidth: strokeWidth = 2, strokeWidthSecondary: strokeWidthSecondary })=>/*#__PURE__*/ (0, $fJU0O$jsx)((0, $4c3f0b77e8caf06d$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "oval-loading",
"aria-label": ariaLabel,
...(0, $84fda1e7e33cfd28$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $fJU0O$jsx)("svg", {
width: width,
height: height,
viewBox: $a5fa864d4dd36deb$var$getViewBoxSize(Number(strokeWidth), Number(strokeWidthSecondary || strokeWidth), $a5fa864d4dd36deb$var$RADIUS),
xmlns: "http://www.w3.org/2000/svg",
stroke: color,
"data-testid": "oval-svg",
children: /*#__PURE__*/ (0, $fJU0O$jsx)("g", {
fill: "none",
fillRule: "evenodd",
children: /*#__PURE__*/ (0, $fJU0O$jsxs)("g", {
transform: "translate(1 1)",
strokeWidth: Number(strokeWidthSecondary || strokeWidth),
"data-testid": "oval-secondary-group",
children: [
/*#__PURE__*/ (0, $fJU0O$jsx)("circle", {
strokeOpacity: ".5",
cx: "0",
cy: "0",
r: $a5fa864d4dd36deb$var$RADIUS,
stroke: secondaryColor,
strokeWidth: strokeWidth
}),
/*#__PURE__*/ (0, $fJU0O$jsx)("path", {
d: $a5fa864d4dd36deb$var$getPath($a5fa864d4dd36deb$var$RADIUS),
children: /*#__PURE__*/ (0, $fJU0O$jsx)("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 0 0",
to: "360 0 0",
dur: "1s",
repeatCount: "indefinite"
})
})
]
})
})
})
});
const $8a2963a7161a08e2$export$83d2259ec538613b = ({ height: height = 80, width: width = 80, radius: radius = 1, color: color = (0, $84fda1e7e33cfd28$export$37394b0fa44b998c), ariaLabel: ariaLabel = "puff-loading", wrapperStyle: wrapperStyle, wrap