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,023 lines (950 loc) • 170 kB
JavaScript
var $1hSWc$reactjsxruntime = require("react/jsx-runtime");
var $1hSWc$react = require("react");
var $1hSWc$styledcomponents = require("styled-components");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "Audio", () => $b6f4e6a49a3349b1$export$153755f98d9861de);
$parcel$export(module.exports, "BallTriangle", () => $5de07963685d3c2c$export$68949ad0373623af);
$parcel$export(module.exports, "Bars", () => $382c63201e271cbc$export$fbc7d6f7dd821b47);
$parcel$export(module.exports, "Circles", () => $37925620ff56ff68$export$765808835a2dc0a2);
$parcel$export(module.exports, "CirclesWithBar", () => $61c7e599dbd0d8f0$export$17c11650828d97e);
$parcel$export(module.exports, "Grid", () => $9d79a6ee7dcec606$export$ef2184bd89960b14);
$parcel$export(module.exports, "Hearts", () => $241bf27d35aea79e$export$2da2f0c7403af3ce);
$parcel$export(module.exports, "InfinitySpin", () => $e0c7d497af6a5cb7$export$8009d4483dfda42);
$parcel$export(module.exports, "LineWave", () => $dbdf130e477b2b12$export$d2101d81f63866ab);
$parcel$export(module.exports, "MutatingDots", () => $40570e1e8c21f068$export$64ea884904791f4);
$parcel$export(module.exports, "Oval", () => $99aaf9de2fb76be1$export$67ad50c48ca3ede4);
$parcel$export(module.exports, "Puff", () => $234d1c5769826f17$export$83d2259ec538613b);
$parcel$export(module.exports, "RevolvingDot", () => $0d0057da6b99739a$export$8e22e563e5362f75);
$parcel$export(module.exports, "Rings", () => $8a0851ffd4027aa9$export$fdd9e2f491a77de7);
$parcel$export(module.exports, "RotatingSquare", () => $37183245a537ba37$export$bb511942ded86554);
$parcel$export(module.exports, "RotatingLines", () => $560c212fcd34c0b4$export$d20df8773b6b77b5);
$parcel$export(module.exports, "TailSpin", () => $1b96770feaabe084$export$f8e5ae7506d65b32);
$parcel$export(module.exports, "ThreeCircles", () => $241a17f436647609$export$e21573137ccb7f5d);
$parcel$export(module.exports, "ThreeDots", () => $6990f5257133e9b3$export$4bf83b24a11cff0b);
$parcel$export(module.exports, "Triangle", () => $1881f0bda44d100d$export$5a465592bfe74b48);
$parcel$export(module.exports, "Watch", () => $b8f12e59bf51d4a5$export$4c68f1a79f88778c);
$parcel$export(module.exports, "FallingLines", () => $744d3fdf6eee6763$export$1ed1943372cc63a9);
$parcel$export(module.exports, "Vortex", () => $4127f2ccf344b6b6$export$d25f4198d7ad6c78);
$parcel$export(module.exports, "RotatingTriangles", () => $ed513a1a7e58f0e3$export$f64f16a115ce395d);
$parcel$export(module.exports, "Radio", () => $9f27de2d8d1ba0bb$export$d7b12c4107be0d61);
$parcel$export(module.exports, "ProgressBar", () => $4d0af05e20031230$export$c17561cb55d4db30);
$parcel$export(module.exports, "MagnifyingGlass", () => $ce92ae5537b5632c$export$bdf537af43a20db5);
$parcel$export(module.exports, "FidgetSpinner", () => $3125941b728957cb$export$8e3fad5cade57efa);
$parcel$export(module.exports, "DNA", () => $f0d24dd397d79ecc$export$bee07fdc425df572);
$parcel$export(module.exports, "Discuss", () => $9bb4564ea383ae84$export$f93420b62a5bdffa);
$parcel$export(module.exports, "ColorRing", () => $97f4aa2a392ebd83$export$dc036a5afb9ca26f);
$parcel$export(module.exports, "Comment", () => $19b6705f4bc245a1$export$4d299b491347818a);
$parcel$export(module.exports, "Blocks", () => $5562447584a28f6d$export$2ba1b65b747a57aa);
$parcel$export(module.exports, "Hourglass", () => $c861e9280ccda123$export$f3c41beb83007357);
// 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 $4a6abea5e2fde319$export$37394b0fa44b998c = "#4fa94d";
const $4a6abea5e2fde319$export$6bfda33bcd6c2d18 = {
"aria-busy": true,
role: "progressbar"
};
const $5cdce437a28387f2$export$21d9f1931ef75b56 = (0, ($parcel$interopDefault($1hSWc$styledcomponents))).div`
display: ${(props)=>props.$visible ? "flex" : "none"};
`;
const $7c3972f4576451de$export$98a285aab16ab26c = "http://www.w3.org/2000/svg";
const $b6f4e6a49a3349b1$export$153755f98d9861de = ({ height: height = "100", width: width = "100", color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), ariaLabel: ariaLabel = "audio-loading", wrapperStyle: wrapperStyle = {}, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
$visible: visible,
style: {
...wrapperStyle
},
className: wrapperClass,
"data-testid": "audio-loading",
"aria-label": ariaLabel,
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
height: `${height}`,
width: `${width}`,
fill: color,
viewBox: "0 0 55 80",
xmlns: (0, $7c3972f4576451de$export$98a285aab16ab26c),
"data-testid": "audio-svg",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("title", {
children: "Audio Visualization"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("desc", {
children: "Animated representation of audio data"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("g", {
transform: "matrix(1 0 0 -1 0 80)",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("rect", {
width: "10",
height: "20",
rx: "3",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "15",
width: "10",
height: "80",
rx: "3",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "30",
width: "10",
height: "50",
rx: "3",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "45",
width: "10",
height: "30",
rx: "3",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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 $5de07963685d3c2c$export$68949ad0373623af = ({ height: height = 100, width: width = 100, radius: radius = 5, color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), ariaLabel: ariaLabel = "ball-triangle-loading", wrapperClass: wrapperClass, wrapperStyle: wrapperStyle, visible: visible = true })=>/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
style: {
...wrapperStyle
},
$visible: visible,
className: wrapperClass,
"data-testid": "ball-triangle-loading",
"aria-label": ariaLabel,
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
height: height,
width: width,
stroke: color,
viewBox: "0 0 57 57",
xmlns: (0, $7c3972f4576451de$export$98a285aab16ab26c),
"data-testid": "ball-triangle-svg",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("title", {
children: "Ball Triangle"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("desc", {
children: "Animated representation of three balls"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("g", {
fill: "none",
fillRule: "evenodd",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("g", {
transform: "translate(1 1)",
strokeWidth: "2",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("circle", {
cx: "5",
cy: "50",
r: radius,
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;5;50;50",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
values: "5;27;49;5",
calcMode: "linear",
repeatCount: "indefinite"
})
]
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("circle", {
cx: "27",
cy: "5",
r: radius,
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
from: "5",
to: "5",
values: "5;50;50;5",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
from: "27",
to: "27",
values: "27;49;5;27",
calcMode: "linear",
repeatCount: "indefinite"
})
]
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("circle", {
cx: "49",
cy: "50",
r: radius,
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;50;5;50",
calcMode: "linear",
repeatCount: "indefinite"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "cx",
from: "49",
to: "49",
begin: "0s",
dur: "2.2s",
values: "49;5;27;49",
calcMode: "linear",
repeatCount: "indefinite"
})
]
})
]
})
})
]
})
});
const $382c63201e271cbc$export$fbc7d6f7dd821b47 = ({ height: height = 80, width: width = 80, color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), ariaLabel: ariaLabel = "bars-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
$visible: visible,
style: {
...wrapperStyle
},
className: wrapperClass,
"data-testid": "bars-loading",
"aria-label": ariaLabel,
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
width: width,
height: height,
fill: color,
viewBox: "0 0 135 140",
xmlns: (0, $7c3972f4576451de$export$98a285aab16ab26c),
"data-testid": "bars-svg",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("rect", {
y: "10",
width: "15",
height: "120",
rx: "6",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsxs)("rect", {
x: "30",
y: "10",
width: "15",
height: "120",
rx: "6",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsxs)("rect", {
x: "60",
width: "15",
height: "140",
rx: "6",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsxs)("rect", {
x: "90",
y: "10",
width: "15",
height: "120",
rx: "6",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsxs)("rect", {
x: "120",
y: "10",
width: "15",
height: "120",
rx: "6",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.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 $37925620ff56ff68$export$765808835a2dc0a2 = ({ height: height = 80, width: width = 80, color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), ariaLabel: ariaLabel = "circles-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"aria-label": ariaLabel,
"data-testid": "circles-loading",
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
width: width,
height: height,
viewBox: "0 0 135 135",
xmlns: (0, $7c3972f4576451de$export$98a285aab16ab26c),
fill: color,
"data-testid": "circles-svg",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("title", {
children: "circles-loading"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("desc", {
children: "Animated representation of circles"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "-360 67 67",
dur: "2.5s",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "360 67 67",
dur: "8s",
repeatCount: "indefinite"
})
})
]
})
});
const $61c7e599dbd0d8f0$export$17c11650828d97e = ({ wrapperStyle: wrapperStyle = {}, visible: visible = true, wrapperClass: wrapperClass = "", height: height = 100, width: width = 100, color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), outerCircleColor: outerCircleColor, innerCircleColor: innerCircleColor, barColor: barColor, ariaLabel: ariaLabel = "circles-with-bar-loading" })=>{
return /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"aria-label": ariaLabel,
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
"data-testid": "circles-with-bar-wrapper",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
version: "1.1",
id: "L1",
xmlns: (0, $7c3972f4576451de$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, $1hSWc$reactjsxruntime.jsx)("title", {
children: "circles-with-bar-loading"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("desc", {
children: "Animated representation of circles with bar"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
attributeType: "XML",
type: "rotate",
dur: "5s",
from: "0 50 50",
to: "360 50 50",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
fill: "none",
stroke: `${innerCircleColor || color}`,
strokeWidth: "1",
strokeMiterlimit: "10",
strokeDasharray: "10,10",
cx: "50",
cy: "50",
r: "39",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
attributeType: "XML",
type: "rotate",
dur: "5s",
from: "0 50 50",
to: "-360 50 50",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("g", {
fill: `${barColor || color}`,
"data-testid": "circles-with-bar-svg-bar",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "30",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.1"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "40",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.2"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "50",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.3"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "60",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.4"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "70",
y: "35",
width: "5",
height: "30",
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeName: "transform",
dur: "1s",
type: "translate",
values: "0 5 ; 0 -5; 0 5",
repeatCount: "indefinite",
begin: "0.5"
})
})
]
})
]
})
});
};
const $9d79a6ee7dcec606$export$ef2184bd89960b14 = ({ height: height = 80, width: width = 80, radius: radius = 12.5, color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), ariaLabel: ariaLabel = "grid-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "grid-loading",
"aria-label": ariaLabel,
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
width: width,
height: height,
viewBox: "0 0 105 105",
fill: color,
"data-testid": "grid-svg",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "12.5",
cy: "12.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "12.5",
cy: "52.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "100ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "52.5",
cy: "12.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "300ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "52.5",
cy: "52.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "600ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "92.5",
cy: "12.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "800ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "92.5",
cy: "52.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "400ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "12.5",
cy: "92.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "700ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "52.5",
cy: "92.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "500ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "92.5",
cy: "92.5",
r: `${radius}`,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "200ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
})
]
})
});
const $241bf27d35aea79e$export$2da2f0c7403af3ce = ({ height: height = 80, width: width = 80, color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), ariaLabel: ariaLabel = "hearts-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "hearts-loading",
"aria-label": ariaLabel,
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("animate", {
attributeName: "fill-opacity",
begin: "0.7s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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 $e0c7d497af6a5cb7$var$len = 242.776657104492;
const $e0c7d497af6a5cb7$var$time = 1.6;
const $e0c7d497af6a5cb7$var$anim = (0, $1hSWc$styledcomponents.keyframes)`
12.5% {
stroke-dasharray: ${$e0c7d497af6a5cb7$var$len * 0.14}px, ${$e0c7d497af6a5cb7$var$len}px;
stroke-dashoffset: -${$e0c7d497af6a5cb7$var$len * 0.11}px;
}
43.75% {
stroke-dasharray: ${$e0c7d497af6a5cb7$var$len * 0.35}px, ${$e0c7d497af6a5cb7$var$len}px;
stroke-dashoffset: -${$e0c7d497af6a5cb7$var$len * 0.35}px;
}
100% {
stroke-dasharray: ${$e0c7d497af6a5cb7$var$len * 0.01}px, ${$e0c7d497af6a5cb7$var$len}px;
stroke-dashoffset: -${$e0c7d497af6a5cb7$var$len * 0.99}px;
}
`;
const $e0c7d497af6a5cb7$var$Path = (0, ($parcel$interopDefault($1hSWc$styledcomponents))).path`
stroke-dasharray: ${$e0c7d497af6a5cb7$var$len * 0.01}px, ${$e0c7d497af6a5cb7$var$len};
stroke-dashoffset: 0;
animation: ${$e0c7d497af6a5cb7$var$anim} ${$e0c7d497af6a5cb7$var$time}s linear infinite;
`;
const $e0c7d497af6a5cb7$export$8009d4483dfda42 = ({ color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), width: width = "200" })=>{
return /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
xmlns: (0, $7c3972f4576451de$export$98a285aab16ab26c),
width: `${width}`,
height: `${Number(width) * 0.5}`,
viewBox: `0 0 ${width} ${Number(100)}`,
"data-testid": "infinity-spin",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)($e0c7d497af6a5cb7$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, $1hSWc$reactjsxruntime.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 $dbdf130e477b2b12$export$d2101d81f63866ab = ({ wrapperStyle: wrapperStyle = {}, visible: visible = true, wrapperClass: wrapperClass = "", height: height = 100, width: width = 100, color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), ariaLabel: ariaLabel = "line-wave-loading", firstLineColor: firstLineColor, middleLineColor: middleLineColor, lastLineColor: lastLineColor })=>{
return /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "line-wave-wrapper",
"aria-label": ariaLabel,
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
version: "1.1",
height: `${height}`,
width: `${width}`,
xmlns: (0, $7c3972f4576451de$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, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "20",
y: "50",
width: "4",
height: "10",
fill: firstLineColor || color,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeType: "xml",
attributeName: "transform",
type: "translate",
values: "0 0; 0 20; 0 0",
begin: "0",
dur: "0.6s",
repeatCount: "indefinite"
})
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "30",
y: "50",
width: "4",
height: "10",
fill: middleLineColor || color,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("rect", {
x: "40",
y: "50",
width: "4",
height: "10",
fill: lastLineColor || color,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animateTransform", {
attributeType: "xml",
attributeName: "transform",
type: "translate",
values: "0 0; 0 20; 0 0",
begin: "0.4s",
dur: "0.6s",
repeatCount: "indefinite"
})
})
]
})
});
};
const $40570e1e8c21f068$export$64ea884904791f4 = ({ height: height = 90, width: width = 80, radius: radius = 12.5, color: color = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), secondaryColor: secondaryColor = (0, $4a6abea5e2fde319$export$37394b0fa44b998c), ariaLabel: ariaLabel = "mutating-dots-loading", wrapperStyle: wrapperStyle, wrapperClass: wrapperClass, visible: visible = true })=>/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)((0, $5cdce437a28387f2$export$21d9f1931ef75b56), {
style: wrapperStyle,
$visible: visible,
className: wrapperClass,
"data-testid": "mutating-dots-loading",
"aria-label": ariaLabel,
...(0, $4a6abea5e2fde319$export$6bfda33bcd6c2d18),
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("svg", {
id: "goo-loader",
width: width,
height: height,
"data-testid": "mutating-dots-svg",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("filter", {
id: "fancy-goo",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "6",
result: "blur"
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("feComposite", {
in: "SourceGraphic",
in2: "goo",
operator: "atop"
})
]
}),
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsxs)("g", {
filter: "url(#fancy-goo)",
children: [
/*#__PURE__*/ (0, $1hSWc$reactjsxruntime.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, $1hSWc$reactjsxruntime.jsx)("circle", {
cx: "50%",
cy: "40",
r: radius,
fill: color,
children: /*#__PURE__*/ (0, $1hSWc$reactjsxruntime.jsx)("animate", {
id: "cAnim1",
attributeType: "XML",
attributeName: "cy",
dur: "0.6s",