@agney/react-loading
Version:
<h2 align="center">React Loading</h2> <p align="center"> Simple and Accessible loading indicators with React. <br /> <br /> <a href="https://www.npmjs.com/package/@agney/react-loading"> <img src="https://badge.fury.io/js/%40agney%2Freact-loading.svg" />
961 lines (892 loc) • 28 kB
JavaScript
import React__default, { useMemo, useContext, createContext, isValidElement, cloneElement, createElement } from 'react';
import invariant from 'tiny-invariant';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var defaultValue = {
indicator: null
};
var LoaderContext = /*#__PURE__*/createContext(defaultValue);
var useLoaderContext = function useLoaderContext() {
return useContext(LoaderContext);
};
var LoaderProvider = function LoaderProvider(_ref) {
var indicator = _ref.indicator,
children = _ref.children;
var value = useMemo(function () {
return {
indicator: indicator
};
}, [indicator]);
return React__default.createElement(LoaderContext.Provider, {
value: value
}, children);
};
/**
* Hook returning Indicator element according to loading argument.
* @example const { containerProps, indicatorEl } = useLoading({ loading: true })
*/
function useLoading(_ref) {
var _ref$loading = _ref.loading,
loading = _ref$loading === void 0 ? false : _ref$loading,
indicator = _ref.indicator,
_ref$loaderProps = _ref.loaderProps,
loaderProps = _ref$loaderProps === void 0 ? {} : _ref$loaderProps;
var containerProps = {
'aria-busy': loading,
'aria-live': 'polite'
};
var loaderContext = useLoaderContext();
var indicatorEl = indicator != null ? indicator : loaderContext == null ? void 0 : loaderContext.indicator;
!isValidElement(indicatorEl) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected a valid React element as indicator') : invariant(false) : void 0;
var accessibleLoaderProps = function () {
var valueText = loaderProps.valueText,
rest = _objectWithoutPropertiesLoose(loaderProps, ["valueText"]);
return _extends({
role: 'progressbar',
'aria-valuetext': valueText
}, rest);
}();
var accessibleIndicator = indicatorEl ? cloneElement(indicatorEl, accessibleLoaderProps) : null;
return {
containerProps: containerProps,
indicatorEl: loading ? accessibleIndicator : null
};
}
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
var _ref = /*#__PURE__*/createElement("g", {
transform: "matrix(1 0 0 -1 0 80)"
}, /*#__PURE__*/createElement("rect", {
width: 10,
height: 20,
rx: 3
}, /*#__PURE__*/createElement("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__*/createElement("rect", {
x: 15,
width: 10,
height: 80,
rx: 3
}, /*#__PURE__*/createElement("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__*/createElement("rect", {
x: 30,
width: 10,
height: 50,
rx: 3
}, /*#__PURE__*/createElement("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__*/createElement("rect", {
x: 45,
width: 10,
height: 30,
rx: 3
}, /*#__PURE__*/createElement("animate", {
attributeName: "height",
begin: "0s",
dur: "2s",
values: "30;45;13;80;56;72;45;76;34;23;67;30",
calcMode: "linear",
repeatCount: "indefinite"
})));
function SvgAudio(props) {
return /*#__PURE__*/createElement("svg", _extends$1({
viewBox: "0 0 55 80",
fill: "currentColor"
}, props), _ref);
}
function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
var _ref$1 = /*#__PURE__*/createElement("g", {
transform: "translate(1 1)",
strokeWidth: 2,
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/createElement("circle", {
cx: 5,
cy: 50,
r: 5
}, /*#__PURE__*/createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;5;50;50",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
values: "5;27;49;5",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 27,
cy: 5,
r: 5
}, /*#__PURE__*/createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
from: 5,
to: 5,
values: "5;50;50;5",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
from: 27,
to: 27,
values: "27;49;5;27",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 49,
cy: 50,
r: 5
}, /*#__PURE__*/createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;50;5;50",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "cx",
from: 49,
to: 49,
begin: "0s",
dur: "2.2s",
values: "49;5;27;49",
calcMode: "linear",
repeatCount: "indefinite"
})));
function SvgBallTriangle(props) {
return /*#__PURE__*/createElement("svg", _extends$2({
viewBox: "0 0 57 57",
stroke: "currentColor"
}, props), _ref$1);
}
function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
var _ref$2 = /*#__PURE__*/createElement("rect", {
y: 10,
width: 15,
height: 120,
rx: 6
}, /*#__PURE__*/createElement("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__*/createElement("animate", {
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref2 = /*#__PURE__*/createElement("rect", {
x: 30,
y: 10,
width: 15,
height: 120,
rx: 6
}, /*#__PURE__*/createElement("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__*/createElement("animate", {
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref3 = /*#__PURE__*/createElement("rect", {
x: 60,
width: 15,
height: 140,
rx: 6
}, /*#__PURE__*/createElement("animate", {
attributeName: "height",
begin: "0s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref4 = /*#__PURE__*/createElement("rect", {
x: 90,
y: 10,
width: 15,
height: 120,
rx: 6
}, /*#__PURE__*/createElement("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__*/createElement("animate", {
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref5 = /*#__PURE__*/createElement("rect", {
x: 120,
y: 10,
width: 15,
height: 120,
rx: 6
}, /*#__PURE__*/createElement("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__*/createElement("animate", {
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}));
function SvgBars(props) {
return /*#__PURE__*/createElement("svg", _extends$3({
viewBox: "0 0 135 140",
fill: "currentColor"
}, props), _ref$2, _ref2, _ref3, _ref4, _ref5);
}
function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
var _ref$3 = /*#__PURE__*/createElement("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"
}, /*#__PURE__*/createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "-360 67 67",
dur: "2.5s",
repeatCount: "indefinite"
}));
var _ref2$1 = /*#__PURE__*/createElement("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"
}, /*#__PURE__*/createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "360 67 67",
dur: "8s",
repeatCount: "indefinite"
}));
function SvgCircles(props) {
return /*#__PURE__*/createElement("svg", _extends$4({
viewBox: "0 0 135 135",
fill: "currentColor"
}, props), _ref$3, _ref2$1);
}
function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
var _ref$4 = /*#__PURE__*/createElement("circle", {
cx: 12.5,
cy: 12.5,
r: 12.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref2$2 = /*#__PURE__*/createElement("circle", {
cx: 12.5,
cy: 52.5,
r: 12.5,
fillOpacity: 0.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "100ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref3$1 = /*#__PURE__*/createElement("circle", {
cx: 52.5,
cy: 12.5,
r: 12.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "300ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref4$1 = /*#__PURE__*/createElement("circle", {
cx: 52.5,
cy: 52.5,
r: 12.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "600ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref5$1 = /*#__PURE__*/createElement("circle", {
cx: 92.5,
cy: 12.5,
r: 12.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "800ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref6 = /*#__PURE__*/createElement("circle", {
cx: 92.5,
cy: 52.5,
r: 12.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "400ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref7 = /*#__PURE__*/createElement("circle", {
cx: 12.5,
cy: 92.5,
r: 12.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "700ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref8 = /*#__PURE__*/createElement("circle", {
cx: 52.5,
cy: 92.5,
r: 12.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "500ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref9 = /*#__PURE__*/createElement("circle", {
cx: 92.5,
cy: 92.5,
r: 12.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "200ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
function SvgGrid(props) {
return /*#__PURE__*/createElement("svg", _extends$5({
viewBox: "0 0 105 105",
fill: "currentColor"
}, props), _ref$4, _ref2$2, _ref3$1, _ref4$1, _ref5$1, _ref6, _ref7, _ref8, _ref9);
}
function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
var _ref$5 = /*#__PURE__*/createElement("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",
fillOpacity: 0.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref2$3 = /*#__PURE__*/createElement("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",
fillOpacity: 0.5
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0.7s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref3$2 = /*#__PURE__*/createElement("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"
});
function SvgHearts(props) {
return /*#__PURE__*/createElement("svg", _extends$6({
viewBox: "0 0 140 64",
fill: "currentColor"
}, props), _ref$5, _ref2$3, _ref3$2);
}
function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
var _ref$6 = /*#__PURE__*/createElement("g", {
transform: "translate(1 1)",
strokeWidth: 2,
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/createElement("circle", {
strokeOpacity: 0.5,
cx: 18,
cy: 18,
r: 18
}), /*#__PURE__*/createElement("path", {
d: "M36 18c0-9.94-8.06-18-18-18"
}, /*#__PURE__*/createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "1s",
repeatCount: "indefinite"
})));
function SvgOval(props) {
return /*#__PURE__*/createElement("svg", _extends$7({
viewBox: "0 0 38 38",
stroke: "currentColor"
}, props), _ref$6);
}
function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
var _ref$7 = /*#__PURE__*/createElement("g", {
fill: "none",
fillRule: "evenodd",
strokeWidth: 2
}, /*#__PURE__*/createElement("circle", {
cx: 22,
cy: 22,
r: 1
}, /*#__PURE__*/createElement("animate", {
attributeName: "r",
begin: "0s",
dur: "1.8s",
values: "1; 20",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.165, 0.84, 0.44, 1",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "stroke-opacity",
begin: "0s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 22,
cy: 22,
r: 1
}, /*#__PURE__*/createElement("animate", {
attributeName: "r",
begin: "-0.9s",
dur: "1.8s",
values: "1; 20",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.165, 0.84, 0.44, 1",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "stroke-opacity",
begin: "-0.9s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
})));
function SvgPuff(props) {
return /*#__PURE__*/createElement("svg", _extends$8({
viewBox: "0 0 44 44",
stroke: "currentColor"
}, props), _ref$7);
}
function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
var _ref$8 = /*#__PURE__*/createElement("g", {
fill: "none",
fillRule: "evenodd",
transform: "translate(1 1)",
strokeWidth: 2
}, /*#__PURE__*/createElement("circle", {
cx: 22,
cy: 22,
r: 6,
stroke: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "r",
begin: "1.5s",
dur: "3s",
values: "6;22",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "stroke-opacity",
begin: "1.5s",
dur: "3s",
values: "1;0",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "stroke-width",
begin: "1.5s",
dur: "3s",
values: "2;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 22,
cy: 22,
r: 6,
stroke: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "r",
begin: "3s",
dur: "3s",
values: "6;22",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "stroke-opacity",
begin: "3s",
dur: "3s",
values: "1;0",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "stroke-width",
begin: "3s",
dur: "3s",
values: "2;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 22,
cy: 22,
r: 8
}, /*#__PURE__*/createElement("animate", {
attributeName: "r",
begin: "0s",
dur: "1.5s",
values: "6;1;2;3;4;5;6",
calcMode: "linear",
repeatCount: "indefinite"
})));
function SvgRings(props) {
return /*#__PURE__*/createElement("svg", _extends$9({
viewBox: "0 0 45 45",
stroke: "currentColor"
}, props), _ref$8);
}
function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
var _ref$9 = /*#__PURE__*/createElement("g", {
transform: "translate(2 1)",
stroke: "currentColor",
strokeWidth: 1.5,
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/createElement("circle", {
cx: 42.601,
cy: 11.462,
r: 5,
fill: "currentColor"
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.3s",
values: "1;0;0;0;0;0;0;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 49.063,
cy: 27.063,
r: 5,
fill: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.3s",
values: "0;1;0;0;0;0;0;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 42.601,
cy: 42.663,
r: 5,
fill: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.3s",
values: "0;0;1;0;0;0;0;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 27,
cy: 49.125,
r: 5,
fill: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.3s",
values: "0;0;0;1;0;0;0;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 11.399,
cy: 42.663,
r: 5,
fill: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.3s",
values: "0;0;0;0;1;0;0;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 4.938,
cy: 27.063,
r: 5,
fill: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.3s",
values: "0;0;0;0;0;1;0;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 11.399,
cy: 11.462,
r: 5,
fill: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.3s",
values: "0;0;0;0;0;0;1;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
cx: 27,
cy: 5,
r: 5,
fill: "none"
}, /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.3s",
values: "0;0;0;0;0;0;0;1",
calcMode: "linear",
repeatCount: "indefinite"
})));
function SvgSpinningCircles(props) {
return /*#__PURE__*/createElement("svg", _extends$a({
viewBox: "0 0 58 58"
}, props), _ref$9);
}
function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
var _ref$a = /*#__PURE__*/createElement("defs", null, /*#__PURE__*/createElement("linearGradient", {
x1: "8.042%",
y1: "0%",
x2: "65.682%",
y2: "23.865%",
id: "tail-spin_svg__a"
}, /*#__PURE__*/createElement("stop", {
stopColor: "#fff",
stopOpacity: 0,
offset: "0%"
}), /*#__PURE__*/createElement("stop", {
stopColor: "#fff",
stopOpacity: 0.631,
offset: "63.146%"
}), /*#__PURE__*/createElement("stop", {
stopColor: "#fff",
offset: "100%"
})));
var _ref2$4 = /*#__PURE__*/createElement("g", {
transform: "translate(1 1)",
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/createElement("path", {
d: "M36 18c0-9.94-8.06-18-18-18",
stroke: "url(#tail-spin_svg__a)",
strokeWidth: 2
}, /*#__PURE__*/createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})), /*#__PURE__*/createElement("circle", {
fill: "#fff",
cx: 36,
cy: 18,
r: 1
}, /*#__PURE__*/createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})));
function SvgTailSpin(props) {
return /*#__PURE__*/createElement("svg", _extends$b({
viewBox: "0 0 38 38"
}, props), _ref$a, _ref2$4);
}
function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
var _ref$b = /*#__PURE__*/createElement("circle", {
cx: 15,
cy: 15,
r: 15
}, /*#__PURE__*/createElement("animate", {
attributeName: "r",
from: 15,
to: 15,
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
from: 1,
to: 1,
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref2$5 = /*#__PURE__*/createElement("circle", {
cx: 60,
cy: 15,
r: 9,
fillOpacity: 0.3
}, /*#__PURE__*/createElement("animate", {
attributeName: "r",
from: 9,
to: 9,
begin: "0s",
dur: "0.8s",
values: "9;15;9",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
from: 0.5,
to: 0.5,
begin: "0s",
dur: "0.8s",
values: ".5;1;.5",
calcMode: "linear",
repeatCount: "indefinite"
}));
var _ref3$3 = /*#__PURE__*/createElement("circle", {
cx: 105,
cy: 15,
r: 15
}, /*#__PURE__*/createElement("animate", {
attributeName: "r",
from: 15,
to: 15,
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/createElement("animate", {
attributeName: "fill-opacity",
from: 1,
to: 1,
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}));
function SvgThreeDots(props) {
return /*#__PURE__*/createElement("svg", _extends$c({
viewBox: "0 0 120 30",
fill: "currentColor"
}, props), _ref$b, _ref2$5, _ref3$3);
}
export { SvgAudio as Audio, SvgBallTriangle as BallTriangle, SvgBars as Bars, SvgCircles as Circles, SvgGrid as Grid, SvgHearts as Hearts, LoaderProvider, SvgOval as Oval, SvgPuff as Puff, SvgRings as Rings, SvgSpinningCircles as SpinningCircles, SvgTailSpin as TailSpin, SvgThreeDots as ThreeDots, useLoading };
//# sourceMappingURL=react-loading.esm.js.map