Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

react-loader-spinner

Package Overview
Dependencies
Maintainers
1
Versions
75
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-loader-spinner - npm Package Compare versions

Comparing version 4.0.0-rc-1 to 4.0.0

Contributing.md
dist/types/index.d.ts
logo/logo.png

146

dist/index.js

@@ -1,78 +0,98 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types", "./loader"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"), require("./loader"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes, global.loader);
global.index = mod.exports;
}
})(this, function (exports, _react, _propTypes, _loader) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Loader;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var _react2 = _interopRequireDefault(_react);
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Loader;
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = _interopRequireWildcard(require("react"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
var _propTypes = _interopRequireDefault(require("prop-types"));
var _loader = require("./loader");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var componentNames = ["Audio", "BallTriangle", "Bars", "Circles", "Grid", "Hearts", "Oval", "Puff", "Rings", "TailSpin", "ThreeDots", "Watch", "RevolvingDot", "Triangle", "Plane", "MutatingDots", "CradleLoader"];
function componentName(type) {
if (componentNames.includes(type)) {
return _loader.Spinner[type];
}
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
return _loader.Spinner.Audio;
}
/**
* @return {null}
*/
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
function Loader(props) {
var _useState = (0, _react.useState)(true),
_useState2 = _slicedToArray(_useState, 2),
display = _useState2[0],
setDisplay = _useState2[1];
var componentNames = ["Audio", "BallTriangle", "Bars", "Circles", "Grid", "Hearts", "Oval", "Puff", "Rings", "TailSpin", "ThreeDots", "Watch", "RevolvingDot", "Triangle", "Plane", "MutatingDots", "CradleLoader"];
(0, _react.useEffect)(function () {
var timer;
function componentName(type) {
if (componentNames.includes(type)) {
return _loader.Spinner[type];
if (props.timeout && props.timeout > 0) {
timer = setTimeout(function () {
setDisplay(false);
}, props.timeout);
}
return _loader.Spinner.Audio;
}
function Loader(props) {
if (!props.visible || props.visible === "false") {
return null;
}
return _react2.default.createElement(
"div",
{ "aria-busy": "true", className: props.className, style: props.style },
_react2.default.createElement(componentName(props.type), _extends({}, props))
);
return function () {
if (timer) clearTimeout(timer);
};
});
if (!props.visible || props.visible === "false") {
return null;
}
Loader.propTypes = {
type: _propTypes2.default.oneOf([].concat(componentNames)),
style: _propTypes2.default.objectOf(_propTypes2.default.string),
className: _propTypes2.default.string,
visible: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string])
};
return display ? /*#__PURE__*/_react["default"].createElement("div", {
"aria-busy": "true",
className: props.className,
style: props.style
}, /*#__PURE__*/_react["default"].createElement(componentName(props.type), _objectSpread({}, props))) : null;
}
Loader.defaultProps = {
type: "Audio",
style: {},
className: "",
visible: true
};
});
Loader.propTypes = {
type: _propTypes["default"].oneOf([].concat(componentNames)),
style: _propTypes["default"].objectOf(_propTypes["default"].string),
className: _propTypes["default"].string,
visible: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
timeout: _propTypes["default"].number
};
Loader.defaultProps = {
type: "Audio",
style: {},
className: "",
visible: true,
timeout: 0
};

184

dist/loader/Audio.js

@@ -1,110 +0,86 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Audio = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Audio = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Audio = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Audio = exports.Audio = function Audio(props) {
return _react2.default.createElement(
"svg",
{
height: props.height,
width: props.width,
fill: props.color,
viewBox: "0 0 55 80",
xmlns: "http://www.w3.org/2000/svg",
"aria-label": props.label
},
_react2.default.createElement(
"g",
{ transform: "matrix(1 0 0 -1 0 80)" },
_react2.default.createElement(
"rect",
{ width: "10", height: "20", rx: "3" },
_react2.default.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"
})
),
_react2.default.createElement(
"rect",
{ x: "15", width: "10", height: "80", rx: "3" },
_react2.default.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"
})
),
_react2.default.createElement(
"rect",
{ x: "30", width: "10", height: "50", rx: "3" },
_react2.default.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"
})
),
_react2.default.createElement(
"rect",
{ x: "45", width: "10", height: "30", rx: "3" },
_react2.default.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"
})
)
)
);
};
var Audio = function Audio(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
height: props.height,
width: props.width,
fill: props.color,
viewBox: "0 0 55 80",
xmlns: "http://www.w3.org/2000/svg",
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("g", {
transform: "matrix(1 0 0 -1 0 80)"
}, /*#__PURE__*/_react["default"].createElement("rect", {
width: "10",
height: "20",
rx: "3"
}, /*#__PURE__*/_react["default"].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__*/_react["default"].createElement("rect", {
x: "15",
width: "10",
height: "80",
rx: "3"
}, /*#__PURE__*/_react["default"].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__*/_react["default"].createElement("rect", {
x: "30",
width: "10",
height: "50",
rx: "3"
}, /*#__PURE__*/_react["default"].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__*/_react["default"].createElement("rect", {
x: "45",
width: "10",
height: "30",
rx: "3"
}, /*#__PURE__*/_react["default"].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"
}))));
};
Audio.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Audio.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Audio = Audio;
Audio.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string
};
Audio.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};

225

dist/loader/BallTriangle.js

@@ -1,132 +0,105 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.BallTriangle = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BallTriangle = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BallTriangle = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var BallTriangle = exports.BallTriangle = function BallTriangle(props) {
return _react2.default.createElement(
"svg",
{
height: props.height,
width: props.width,
stroke: props.color,
viewBox: "0 0 57 57",
xmlns: "http://www.w3.org/2000/svg",
"aria-label": props.label
},
_react2.default.createElement(
"g",
{ fill: "none", fillRule: "evenodd" },
_react2.default.createElement(
"g",
{ transform: "translate(1 1)", strokeWidth: "2" },
_react2.default.createElement(
"circle",
{ cx: "5", cy: "50", r: "5" },
_react2.default.createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;5;50;50",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
values: "5;27;49;5",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "27", cy: "5", r: "5" },
_react2.default.createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
from: "5",
to: "5",
values: "5;50;50;5",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
from: "27",
to: "27",
values: "27;49;5;27",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "49", cy: "50", r: "5" },
_react2.default.createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;50;5;50",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "cx",
from: "49",
to: "49",
begin: "0s",
dur: "2.2s",
values: "49;5;27;49",
calcMode: "linear",
repeatCount: "indefinite"
})
)
)
)
);
};
var BallTriangle = function BallTriangle(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
height: props.height,
width: props.width,
stroke: props.color,
viewBox: "0 0 57 57",
xmlns: "http://www.w3.org/2000/svg",
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(1 1)",
strokeWidth: "2"
}, /*#__PURE__*/_react["default"].createElement("circle", {
cx: "5",
cy: "50",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;5;50;50",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
values: "5;27;49;5",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "27",
cy: "5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
from: "5",
to: "5",
values: "5;50;50;5",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
from: "27",
to: "27",
values: "27;49;5;27",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "49",
cy: "50",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;50;5;50",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "cx",
from: "49",
to: "49",
begin: "0s",
dur: "2.2s",
values: "49;5;27;49",
calcMode: "linear",
repeatCount: "indefinite"
})))));
};
BallTriangle.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
BallTriangle.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.BallTriangle = BallTriangle;
BallTriangle.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
BallTriangle.defaultProps = {
height: 80,
width: 80,
color: "green",
radius: 5,
label: "audio-loading"
};

281

dist/loader/Bars.js

@@ -1,158 +0,135 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Bars = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Bars = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Bars = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Bars = exports.Bars = function Bars(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
fill: props.color,
viewBox: "0 0 135 140",
xmlns: "http://www.w3.org/2000/svg",
"aria-label": props.label
},
_react2.default.createElement(
"rect",
{ y: "10", width: "15", height: "120", rx: "6" },
_react2.default.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"
}),
_react2.default.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"
})
),
_react2.default.createElement(
"rect",
{ x: "30", y: "10", width: "15", height: "120", rx: "6" },
_react2.default.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"
}),
_react2.default.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"
})
),
_react2.default.createElement(
"rect",
{ x: "60", width: "15", height: "140", rx: "6" },
_react2.default.createElement("animate", {
attributeName: "height",
begin: "0s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"rect",
{ x: "90", y: "10", width: "15", height: "120", rx: "6" },
_react2.default.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"
}),
_react2.default.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"
})
),
_react2.default.createElement(
"rect",
{ x: "120", y: "10", width: "15", height: "120", rx: "6" },
_react2.default.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"
}),
_react2.default.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 Bars = function Bars(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
fill: props.color,
viewBox: "0 0 135 140",
xmlns: "http://www.w3.org/2000/svg",
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("rect", {
y: "10",
width: "15",
height: "120",
rx: "6"
}, /*#__PURE__*/_react["default"].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__*/_react["default"].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"
})), /*#__PURE__*/_react["default"].createElement("rect", {
x: "30",
y: "10",
width: "15",
height: "120",
rx: "6"
}, /*#__PURE__*/_react["default"].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__*/_react["default"].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"
})), /*#__PURE__*/_react["default"].createElement("rect", {
x: "60",
width: "15",
height: "140",
rx: "6"
}, /*#__PURE__*/_react["default"].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__*/_react["default"].createElement("animate", {
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("rect", {
x: "90",
y: "10",
width: "15",
height: "120",
rx: "6"
}, /*#__PURE__*/_react["default"].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__*/_react["default"].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"
})), /*#__PURE__*/_react["default"].createElement("rect", {
x: "120",
y: "10",
width: "15",
height: "120",
rx: "6"
}, /*#__PURE__*/_react["default"].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__*/_react["default"].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"
})));
};
Bars.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Bars.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Bars = Bars;
Bars.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string
};
Bars.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};

125

dist/loader/Circles.js

@@ -1,82 +0,55 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Circles = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Circles = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Circles = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Circles = exports.Circles = function Circles(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
viewBox: "0 0 135 135",
xmlns: "http://www.w3.org/2000/svg",
fill: props.color,
"aria-label": props.label
},
_react2.default.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" },
_react2.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "-360 67 67",
dur: "2.5s",
repeatCount: "indefinite"
})
),
_react2.default.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" },
_react2.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "360 67 67",
dur: "8s",
repeatCount: "indefinite"
})
)
);
};
var Circles = function Circles(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
viewBox: "0 0 135 135",
xmlns: "http://www.w3.org/2000/svg",
fill: props.color,
"aria-label": props.label
}, /*#__PURE__*/_react["default"].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__*/_react["default"].createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "-360 67 67",
dur: "2.5s",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].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__*/_react["default"].createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 67 67",
to: "360 67 67",
dur: "8s",
repeatCount: "indefinite"
})));
};
Circles.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Circles.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Circles = Circles;
Circles.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string
};
Circles.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};

95

dist/loader/CradleLoader.js

@@ -1,67 +0,40 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.CradleLoader = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CradleLoader = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CradleLoader = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var CradleLoader = exports.CradleLoader = function CradleLoader(props) {
return _react2.default.createElement(
"div",
{ "aria-label": props.label, role: "presentation", className: "container" },
_react2.default.createElement(
"div",
{ className: "react-spinner-loader-swing" },
_react2.default.createElement("div", { className: "react-spinner-loader-swing-l" }),
_react2.default.createElement("div", null),
_react2.default.createElement("div", null),
_react2.default.createElement("div", null),
_react2.default.createElement("div", null),
_react2.default.createElement("div", null),
_react2.default.createElement("div", { className: "react-spinner-loader-swing-r" })
),
_react2.default.createElement(
"div",
{ className: "react-spinner-loader-shadow" },
_react2.default.createElement("div", { className: "react-spinner-loader-shadow-l" }),
_react2.default.createElement("div", null),
_react2.default.createElement("div", null),
_react2.default.createElement("div", null),
_react2.default.createElement("div", null),
_react2.default.createElement("div", null),
_react2.default.createElement("div", { className: "react-spinner-loader-shadow-r" })
)
);
};
var CradleLoader = function CradleLoader(props) {
return /*#__PURE__*/_react["default"].createElement("div", {
"aria-label": props.label,
role: "presentation",
className: "container"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "react-spinner-loader-swing"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "react-spinner-loader-swing-l"
}), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", {
className: "react-spinner-loader-swing-r"
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "react-spinner-loader-shadow"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "react-spinner-loader-shadow-l"
}), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", {
className: "react-spinner-loader-shadow-r"
})));
};
CradleLoader.propTypes = {
label: _propTypes2.default.string
};
CradleLoader.defaultProps = {
label: "audio-loading"
};
});
exports.CradleLoader = CradleLoader;
CradleLoader.propTypes = {
label: _propTypes["default"].string
};
CradleLoader.defaultProps = {
label: "audio-loading"
};

290

dist/loader/Grid.js

@@ -1,165 +0,137 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Grid = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Grid = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Grid = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Grid = exports.Grid = function Grid(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
viewBox: "0 0 105 105",
fill: props.color,
"aria-label": props.label
},
_react2.default.createElement(
"circle",
{ cx: "12.5", cy: "12.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "12.5", cy: "52.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "100ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "52.5", cy: "12.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "300ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "52.5", cy: "52.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "600ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "92.5", cy: "12.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "800ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "92.5", cy: "52.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "400ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "12.5", cy: "92.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "700ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "52.5", cy: "92.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "500ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "92.5", cy: "92.5", r: "12.5" },
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "200ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
)
);
};
var Grid = function Grid(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
viewBox: "0 0 105 105",
fill: props.color,
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("circle", {
cx: "12.5",
cy: "12.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "12.5",
cy: "52.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "100ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "52.5",
cy: "12.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "300ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "52.5",
cy: "52.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "600ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "92.5",
cy: "12.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "800ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "92.5",
cy: "52.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "400ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "12.5",
cy: "92.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "700ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "52.5",
cy: "92.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "500ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "92.5",
cy: "92.5",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "200ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})));
};
Grid.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Grid.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Grid = Grid;
Grid.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
Grid.defaultProps = {
height: 80,
width: 80,
color: "green",
radius: 12.5,
label: "audio-loading"
};

144

dist/loader/Hearts.js

@@ -1,93 +0,63 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Hearts = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Hearts = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Hearts = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Hearts = exports.Hearts = function Hearts(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
viewBox: "0 0 140 64",
xmlns: "http://www.w3.org/2000/svg",
fill: props.color,
"aria-label": props.label
},
_react2.default.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",
attributeName: "fill-opacity",
from: "0",
to: ".5"
},
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.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",
attributeName: "fill-opacity",
from: "0",
to: ".5"
},
_react2.default.createElement("animate", {
attributeName: "fill-opacity",
begin: "0.7s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.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" })
);
};
var Hearts = function Hearts(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
viewBox: "0 0 140 64",
xmlns: "http://www.w3.org/2000/svg",
fill: props.color,
"aria-label": props.label
}, /*#__PURE__*/_react["default"].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",
attributeName: "fill-opacity",
from: "0",
to: ".5"
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].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",
attributeName: "fill-opacity",
from: "0",
to: ".5"
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fill-opacity",
begin: "0.7s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].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"
}));
};
Hearts.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Hearts.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Hearts = Hearts;
Hearts.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string
};
Hearts.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};

98

dist/loader/index.js

@@ -1,39 +0,61 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "./Circles", "./Watch", "./Audio", "./BallTriangle", "./Bars", "./CradleLoader", "./Grid", "./Hearts", "./MutatingDots", "./Oval", "./Plane", "./Puff", "./RevolvingDot", "./Rings", "./TailSpin", "./ThreeDots", "./Triangle"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("./Circles"), require("./Watch"), require("./Audio"), require("./BallTriangle"), require("./Bars"), require("./CradleLoader"), require("./Grid"), require("./Hearts"), require("./MutatingDots"), require("./Oval"), require("./Plane"), require("./Puff"), require("./RevolvingDot"), require("./Rings"), require("./TailSpin"), require("./ThreeDots"), require("./Triangle"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.Circles, global.Watch, global.Audio, global.BallTriangle, global.Bars, global.CradleLoader, global.Grid, global.Hearts, global.MutatingDots, global.Oval, global.Plane, global.Puff, global.RevolvingDot, global.Rings, global.TailSpin, global.ThreeDots, global.Triangle);
global.index = mod.exports;
}
})(this, function (exports, _Circles, _Watch, _Audio, _BallTriangle, _Bars, _CradleLoader, _Grid, _Hearts, _MutatingDots, _Oval, _Plane, _Puff, _RevolvingDot, _Rings, _TailSpin, _ThreeDots, _Triangle) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Spinner = undefined;
var Spinner = exports.Spinner = {
Circles: _Circles.Circles,
Audio: _Audio.Audio,
BallTriangle: _BallTriangle.BallTriangle,
Bars: _Bars.Bars,
CradleLoader: _CradleLoader.CradleLoader,
Grid: _Grid.Grid,
Hearts: _Hearts.Hearts,
MutatingDots: _MutatingDots.MutatingDots,
Oval: _Oval.Oval,
Plane: _Plane.Plane,
Puff: _Puff.Puff,
RevolvingDot: _RevolvingDot.RevolvingDot,
Rings: _Rings.Rings,
TailSpin: _TailSpin.TailSpin,
ThreeDots: _ThreeDots.ThreeDots,
Triangle: _Triangle.Triangle,
Watch: _Watch.Watch
};
});
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Spinner = void 0;
var _Circles = require("./Circles");
var _Watch = require("./Watch");
var _Audio = require("./Audio");
var _BallTriangle = require("./BallTriangle");
var _Bars = require("./Bars");
var _CradleLoader = require("./CradleLoader");
var _Grid = require("./Grid");
var _Hearts = require("./Hearts");
var _MutatingDots = require("./MutatingDots");
var _Oval = require("./Oval");
var _Plane = require("./Plane");
var _Puff = require("./Puff");
var _RevolvingDot = require("./RevolvingDot");
var _Rings = require("./Rings");
var _TailSpin = require("./TailSpin");
var _ThreeDots = require("./ThreeDots");
var _Triangle = require("./Triangle");
var Spinner = {
Circles: _Circles.Circles,
Audio: _Audio.Audio,
BallTriangle: _BallTriangle.BallTriangle,
Bars: _Bars.Bars,
CradleLoader: _CradleLoader.CradleLoader,
Grid: _Grid.Grid,
Hearts: _Hearts.Hearts,
MutatingDots: _MutatingDots.MutatingDots,
Oval: _Oval.Oval,
Plane: _Plane.Plane,
Puff: _Puff.Puff,
RevolvingDot: _RevolvingDot.RevolvingDot,
Rings: _Rings.Rings,
TailSpin: _TailSpin.TailSpin,
ThreeDots: _ThreeDots.ThreeDots,
Triangle: _Triangle.Triangle,
Watch: _Watch.Watch
};
exports.Spinner = Spinner;

188

dist/loader/MutatingDots.js

@@ -1,105 +0,95 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.MutatingDots = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MutatingDots = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MutatingDots = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var MutatingDots = exports.MutatingDots = function MutatingDots(props) {
return _react2.default.createElement(
"svg",
{ id: "goo-loader", width: props.width, height: 90, fill: props.color, "aria-label": props.label },
_react2.default.createElement(
"filter",
{ id: "fancy-goo" },
_react2.default.createElement("feGaussianBlur", { "in": "SourceGraphic", stdDeviation: "6", result: "blur" }),
_react2.default.createElement("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"
}),
_react2.default.createElement("feComposite", { "in": "SourceGraphic", in2: "goo", operator: "atop" })
),
_react2.default.createElement(
"g",
{ filter: "url(#fancy-goo)" },
_react2.default.createElement("animateTransform", {
id: "mainAnim",
attributeName: "transform",
attributeType: "XML",
type: "rotate",
from: "0 50 50",
to: "359 50 50",
dur: "1.2s",
repeatCount: "indefinite"
}),
_react2.default.createElement(
"circle",
{ cx: "50%", cy: "40", r: "11" },
_react2.default.createElement("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.175, 0.885, 0.320, 1.5; 0.175, 0.885, 0.320, 1.5"
})
),
_react2.default.createElement(
"circle",
{ cx: "50%", cy: "60", r: "11" },
_react2.default.createElement("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.175, 0.885, 0.320, 1.5;0.175, 0.885, 0.320, 1.5"
})
)
)
);
};
var MutatingDots = function MutatingDots(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
id: "goo-loader",
width: props.width,
height: props.height,
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("filter", {
id: "fancy-goo"
}, /*#__PURE__*/_react["default"].createElement("feGaussianBlur", {
"in": "SourceGraphic",
stdDeviation: "6",
result: "blur"
}), /*#__PURE__*/_react["default"].createElement("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__*/_react["default"].createElement("feComposite", {
"in": "SourceGraphic",
in2: "goo",
operator: "atop"
})), /*#__PURE__*/_react["default"].createElement("g", {
filter: "url(#fancy-goo)"
}, /*#__PURE__*/_react["default"].createElement("animateTransform", {
id: "mainAnim",
attributeName: "transform",
attributeType: "XML",
type: "rotate",
from: "0 50 50",
to: "359 50 50",
dur: "1.2s",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "50%",
cy: "40",
r: props.radius,
fill: props.color
}, /*#__PURE__*/_react["default"].createElement("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__*/_react["default"].createElement("circle", {
cx: "50%",
cy: "60",
r: props.radius,
fill: props.secondaryColor
}, /*#__PURE__*/_react["default"].createElement("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"
}))));
};
MutatingDots.propTypes = {
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
MutatingDots.defaultProps = {
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.MutatingDots = MutatingDots;
MutatingDots.propTypes = {
width: _propTypes["default"].number,
secondaryColor: _propTypes["default"].string,
height: _propTypes["default"].number,
color: _propTypes["default"].string,
radius: _propTypes["default"].number,
label: _propTypes["default"].string
};
MutatingDots.defaultProps = {
width: 80,
height: 90,
color: "green",
radius: 11,
secondaryColor: "green",
label: "audio-loading"
};

126

dist/loader/Oval.js

@@ -1,79 +0,59 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Oval = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Oval = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Oval = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Oval = exports.Oval = function Oval(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
stroke: props.color,
"aria-label": props.label
},
_react2.default.createElement(
"g",
{ fill: "none", fillRule: "evenodd" },
_react2.default.createElement(
"g",
{ transform: "translate(1 1)", strokeWidth: "2" },
_react2.default.createElement("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }),
_react2.default.createElement(
"path",
{ d: "M36 18c0-9.94-8.06-18-18-18" },
_react2.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "1s",
repeatCount: "indefinite"
})
)
)
)
);
};
var Oval = function Oval(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
stroke: props.color,
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(1 1)",
strokeWidth: "2"
}, /*#__PURE__*/_react["default"].createElement("circle", {
strokeOpacity: ".5",
cx: "18",
cy: "18",
r: props.radius
}), /*#__PURE__*/_react["default"].createElement("path", {
d: "M36 18c0-9.94-8.06-18-18-18"
}, /*#__PURE__*/_react["default"].createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "1s",
repeatCount: "indefinite"
})))));
};
Oval.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Oval.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Oval = Oval;
Oval.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
Oval.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading",
radius: 18
};

120

dist/loader/Plane.js

@@ -1,78 +0,54 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Plane = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Plane = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Plane = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Plane = exports.Plane = function Plane(props) {
return _react2.default.createElement(
"svg",
{
className: "react-spinner-loader-svg-calLoader",
xmlns: "http://www.w3.org/2000/svg",
width: "230",
height: "230",
"aria-label": props.label
},
_react2.default.createElement(
"desc",
null,
"Plane animation. Loading "
),
_react2.default.createElement("path", {
className: "react-spinner-loader-cal-loader__path",
style: { stroke: props.secondaryColor },
d: "M86.429 40c63.616-20.04 101.511 25.08 107.265 61.93 6.487 41.54-18.593 76.99-50.6 87.643-59.46 19.791-101.262-23.577-107.142-62.616C29.398 83.441 59.945 48.343 86.43 40z",
fill: "none",
stroke: "#0099cc",
strokeWidth: "4",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeDasharray: "10 10 10 10 10 10 10 432",
strokeDashoffset: "77"
}),
_react2.default.createElement("path", {
className: "cal-loader__plane",
style: { fill: props.color },
d: "M141.493 37.93c-1.087-.927-2.942-2.002-4.32-2.501-2.259-.824-3.252-.955-9.293-1.172-4.017-.146-5.197-.23-5.47-.37-.766-.407-1.526-1.448-7.114-9.773-4.8-7.145-5.344-7.914-6.327-8.976-1.214-1.306-1.396-1.378-3.79-1.473-1.036-.04-2-.043-2.153-.002-.353.1-.87.586-1 .952-.139.399-.076.71.431 2.22.241.72 1.029 3.386 1.742 5.918 1.644 5.844 2.378 8.343 2.863 9.705.206.601.33 1.1.275 1.125-.24.097-10.56 1.066-11.014 1.032a3.532 3.532 0 0 1-1.002-.276l-.487-.246-2.044-2.613c-2.234-2.87-2.228-2.864-3.35-3.309-.717-.287-2.82-.386-3.276-.163-.457.237-.727.644-.737 1.152-.018.39.167.805 1.916 4.373 1.06 2.166 1.964 4.083 1.998 4.27.04.179.004.521-.076.75-.093.228-1.109 2.064-2.269 4.088-1.921 3.34-2.11 3.711-2.123 4.107-.008.25.061.557.168.725.328.512.72.644 1.966.676 1.32.029 2.352-.236 3.05-.762.222-.171 1.275-1.313 2.412-2.611 1.918-2.185 2.048-2.32 2.45-2.505.241-.111.601-.232.82-.271.267-.058 2.213.201 5.912.8 3.036.48 5.525.894 5.518.914 0 .026-.121.306-.27.638-.54 1.198-1.515 3.842-3.35 9.021-1.029 2.913-2.107 5.897-2.4 6.62-.703 1.748-.725 1.833-.594 2.286.137.46.45.833.872 1.012.41.177 3.823.24 4.37.085.852-.25 1.44-.688 2.312-1.724 1.166-1.39 3.169-3.948 6.771-8.661 5.8-7.583 6.561-8.49 7.387-8.702.233-.065 2.828-.056 5.784.011 5.827.138 6.64.09 8.62-.5 2.24-.67 4.035-1.65 5.517-3.016 1.136-1.054 1.135-1.014.207-1.962-.357-.38-.767-.777-.902-.893z",
fill: "#000033"
})
);
};
var Plane = function Plane(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
className: "react-spinner-loader-svg-calLoader",
xmlns: "http://www.w3.org/2000/svg",
width: "230",
height: "230",
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("desc", null, "Plane animation. Loading "), /*#__PURE__*/_react["default"].createElement("path", {
className: "react-spinner-loader-cal-loader__path",
style: {
stroke: props.secondaryColor
},
d: "M86.429 40c63.616-20.04 101.511 25.08 107.265 61.93 6.487 41.54-18.593 76.99-50.6 87.643-59.46 19.791-101.262-23.577-107.142-62.616C29.398 83.441 59.945 48.343 86.43 40z",
fill: "none",
stroke: "#0099cc",
strokeWidth: "4",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeDasharray: "10 10 10 10 10 10 10 432",
strokeDashoffset: "77"
}), /*#__PURE__*/_react["default"].createElement("path", {
className: "cal-loader__plane",
style: {
fill: props.color
},
d: "M141.493 37.93c-1.087-.927-2.942-2.002-4.32-2.501-2.259-.824-3.252-.955-9.293-1.172-4.017-.146-5.197-.23-5.47-.37-.766-.407-1.526-1.448-7.114-9.773-4.8-7.145-5.344-7.914-6.327-8.976-1.214-1.306-1.396-1.378-3.79-1.473-1.036-.04-2-.043-2.153-.002-.353.1-.87.586-1 .952-.139.399-.076.71.431 2.22.241.72 1.029 3.386 1.742 5.918 1.644 5.844 2.378 8.343 2.863 9.705.206.601.33 1.1.275 1.125-.24.097-10.56 1.066-11.014 1.032a3.532 3.532 0 0 1-1.002-.276l-.487-.246-2.044-2.613c-2.234-2.87-2.228-2.864-3.35-3.309-.717-.287-2.82-.386-3.276-.163-.457.237-.727.644-.737 1.152-.018.39.167.805 1.916 4.373 1.06 2.166 1.964 4.083 1.998 4.27.04.179.004.521-.076.75-.093.228-1.109 2.064-2.269 4.088-1.921 3.34-2.11 3.711-2.123 4.107-.008.25.061.557.168.725.328.512.72.644 1.966.676 1.32.029 2.352-.236 3.05-.762.222-.171 1.275-1.313 2.412-2.611 1.918-2.185 2.048-2.32 2.45-2.505.241-.111.601-.232.82-.271.267-.058 2.213.201 5.912.8 3.036.48 5.525.894 5.518.914 0 .026-.121.306-.27.638-.54 1.198-1.515 3.842-3.35 9.021-1.029 2.913-2.107 5.897-2.4 6.62-.703 1.748-.725 1.833-.594 2.286.137.46.45.833.872 1.012.41.177 3.823.24 4.37.085.852-.25 1.44-.688 2.312-1.724 1.166-1.39 3.169-3.948 6.771-8.661 5.8-7.583 6.561-8.49 7.387-8.702.233-.065 2.828-.056 5.784.011 5.827.138 6.64.09 8.62-.5 2.24-.67 4.035-1.65 5.517-3.016 1.136-1.054 1.135-1.014.207-1.962-.357-.38-.767-.777-.902-.893z",
fill: "#000033"
}));
};
Plane.propTypes = {
secondaryColor: _propTypes2.default.string,
color: _propTypes2.default.string,
label: _propTypes2.default
};
Plane.defaultProps = {
secondaryColor: "grey",
color: "#FFA500",
label: "async-loading"
};
});
exports.Plane = Plane;
Plane.propTypes = {
secondaryColor: _propTypes["default"].string,
color: _propTypes["default"].string,
label: _propTypes["default"].string
};
Plane.defaultProps = {
secondaryColor: "grey",
color: "#FFA500",
label: "async-loading"
};

185

dist/loader/Puff.js

@@ -1,110 +0,87 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Puff = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Puff = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Puff = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Puff = exports.Puff = function Puff(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
viewBox: "0 0 44 44",
xmlns: "http://www.w3.org/2000/svg",
stroke: props.color,
"aria-label": props.label
},
_react2.default.createElement(
"g",
{ fill: "none", fillRule: "evenodd", strokeWidth: "2" },
_react2.default.createElement(
"circle",
{ cx: "22", cy: "22", r: "1" },
_react2.default.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"
}),
_react2.default.createElement("animate", {
attributeName: "strokeOpacity",
begin: "0s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "22", cy: "22", r: "1" },
_react2.default.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"
}),
_react2.default.createElement("animate", {
attributeName: "strokeOpacity",
begin: "-0.9s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
})
)
)
);
};
var Puff = function Puff(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
viewBox: "0 0 44 44",
xmlns: "http://www.w3.org/2000/svg",
stroke: props.color,
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("g", {
fill: "none",
fillRule: "evenodd",
strokeWidth: "2"
}, /*#__PURE__*/_react["default"].createElement("circle", {
cx: "22",
cy: "22",
r: props.radius
}, /*#__PURE__*/_react["default"].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__*/_react["default"].createElement("animate", {
attributeName: "strokeOpacity",
begin: "0s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "22",
cy: "22",
r: props.radius
}, /*#__PURE__*/_react["default"].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__*/_react["default"].createElement("animate", {
attributeName: "strokeOpacity",
begin: "-0.9s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
}))));
};
Puff.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Puff.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Puff = Puff;
Puff.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
Puff.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading",
radius: 1
};

132

dist/loader/RevolvingDot.js

@@ -1,80 +0,64 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.RevolvingDot = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RevolvingDot = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RevolvingDot = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var RevolvingDot = exports.RevolvingDot = function RevolvingDot(props) {
return _react2.default.createElement(
"svg",
{
version: "1.1",
width: props.width,
height: props.height,
xmlns: "http://www.w3.org/2000/svg",
x: "0px",
y: "0px",
"aria-label": props.label
},
_react2.default.createElement("circle", {
fill: "none",
stroke: props.color,
strokeWidth: "4",
cx: "50",
cy: "50",
r: "44",
style: { opacity: 0.5 }
}),
_react2.default.createElement(
"circle",
{ fill: props.color, stroke: props.color, strokeWidth: "3", cx: "8", cy: "54", r: "6" },
_react2.default.createElement("animateTransform", {
attributeName: "transform",
dur: "2s",
type: "rotate",
from: "0 50 48",
to: "360 50 52",
repeatCount: "indefinite"
})
)
);
};
var RevolvingDot = function RevolvingDot(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
version: "1.1",
width: props.width,
height: props.height,
xmlns: "http://www.w3.org/2000/svg",
x: "0px",
y: "0px",
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("circle", {
fill: "none",
stroke: props.color,
strokeWidth: "4",
cx: "50",
cy: "50",
r: props.radius + 38,
style: {
opacity: 0.5
}
}), /*#__PURE__*/_react["default"].createElement("circle", {
fill: props.color,
stroke: props.color,
strokeWidth: "3",
cx: "8",
cy: "54",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animateTransform", {
attributeName: "transform",
dur: "2s",
type: "rotate",
from: "0 50 48",
to: "360 50 52",
repeatCount: "indefinite"
})));
};
RevolvingDot.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
RevolvingDot.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.RevolvingDot = RevolvingDot;
RevolvingDot.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
RevolvingDot.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading",
radius: 6
};

225

dist/loader/Rings.js

@@ -1,130 +0,107 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Rings = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Rings = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Rings = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Rings = exports.Rings = function Rings(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
viewBox: "0 0 45 45",
xmlns: "http://www.w3.org/2000/svg",
stroke: props.color,
"aria-label": props.label
},
_react2.default.createElement(
"g",
{ fill: "none", fillRule: "evenodd", transform: "translate(1 1)", strokeWidth: "2" },
_react2.default.createElement(
"circle",
{ cx: "22", cy: "22", r: "6", strokeOpacity: "0" },
_react2.default.createElement("animate", {
attributeName: "r",
begin: "1.5s",
dur: "3s",
values: "6;22",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "stroke-opacity",
begin: "1.5s",
dur: "3s",
values: "1;0",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "stroke-width",
begin: "1.5s",
dur: "3s",
values: "2;0",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "22", cy: "22", r: "6", strokeOpacity: "0" },
_react2.default.createElement("animate", {
attributeName: "r",
begin: "3s",
dur: "3s",
values: "6;22",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "strokeOpacity",
begin: "3s",
dur: "3s",
values: "1;0",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "strokeWidth",
begin: "3s",
dur: "3s",
values: "2;0",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "22", cy: "22", r: "8" },
_react2.default.createElement("animate", {
attributeName: "r",
begin: "0s",
dur: "1.5s",
values: "6;1;2;3;4;5;6",
calcMode: "linear",
repeatCount: "indefinite"
})
)
)
);
};
var Rings = function Rings(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
viewBox: "0 0 45 45",
xmlns: "http://www.w3.org/2000/svg",
stroke: props.color,
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("g", {
fill: "none",
fillRule: "evenodd",
transform: "translate(1 1)",
strokeWidth: "2"
}, /*#__PURE__*/_react["default"].createElement("circle", {
cx: "22",
cy: "22",
r: props.radius,
strokeOpacity: "0"
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "r",
begin: "1.5s",
dur: "3s",
values: "6;22",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "stroke-opacity",
begin: "1.5s",
dur: "3s",
values: "1;0",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "stroke-width",
begin: "1.5s",
dur: "3s",
values: "2;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "22",
cy: "22",
r: props.radius,
strokeOpacity: "0"
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "r",
begin: "3s",
dur: "3s",
values: "6;22",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "strokeOpacity",
begin: "3s",
dur: "3s",
values: "1;0",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "strokeWidth",
begin: "3s",
dur: "3s",
values: "2;0",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "22",
cy: "22",
r: props.radius + 2
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "r",
begin: "0s",
dur: "1.5s",
values: "6;1;2;3;4;5;6",
calcMode: "linear",
repeatCount: "indefinite"
}))));
};
Rings.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Rings.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Rings = Rings;
Rings.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
Rings.defaultProps = {
height: 80,
width: 80,
color: "green",
radius: 6,
label: "audio-loading"
};

172

dist/loader/TailSpin.js

@@ -1,100 +0,84 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.TailSpin = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TailSpin = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TailSpin = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var TailSpin = exports.TailSpin = function TailSpin(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
"aria-label": props.label
},
_react2.default.createElement(
"defs",
null,
_react2.default.createElement(
"linearGradient",
{ x1: "8.042%", y1: "0%", x2: "65.682%", y2: "23.865%", id: "a" },
_react2.default.createElement("stop", { stopColor: props.color, stopOpacity: "0", offset: "0%" }),
_react2.default.createElement("stop", { stopColor: props.color, stopOpacity: ".631", offset: "63.146%" }),
_react2.default.createElement("stop", { stopColor: props.color, offset: "100%" })
)
),
_react2.default.createElement(
"g",
{ fill: "none", fillRule: "evenodd" },
_react2.default.createElement(
"g",
{ transform: "translate(1 1)" },
_react2.default.createElement(
"path",
{ d: "M36 18c0-9.94-8.06-18-18-18", id: "Oval-2", stroke: props.color, strokeWidth: "2" },
_react2.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ fill: "#fff", cx: "36", cy: "18", r: "1" },
_react2.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})
)
)
)
);
};
var TailSpin = function TailSpin(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("linearGradient", {
x1: "8.042%",
y1: "0%",
x2: "65.682%",
y2: "23.865%",
id: "a"
}, /*#__PURE__*/_react["default"].createElement("stop", {
stopColor: props.color,
stopOpacity: "0",
offset: "0%"
}), /*#__PURE__*/_react["default"].createElement("stop", {
stopColor: props.color,
stopOpacity: ".631",
offset: "63.146%"
}), /*#__PURE__*/_react["default"].createElement("stop", {
stopColor: props.color,
offset: "100%"
}))), /*#__PURE__*/_react["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(1 1)"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M36 18c0-9.94-8.06-18-18-18",
id: "Oval-2",
stroke: props.color,
strokeWidth: "2"
}, /*#__PURE__*/_react["default"].createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
fill: "#fff",
cx: "36",
cy: "18",
r: props.radius
}, /*#__PURE__*/_react["default"].createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})))));
};
TailSpin.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
TailSpin.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.TailSpin = TailSpin;
TailSpin.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
TailSpin.defaultProps = {
height: 80,
width: 80,
color: "green",
radius: 1,
label: "audio-loading"
};

226

dist/loader/ThreeDots.js

@@ -1,130 +0,108 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.ThreeDots = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ThreeDots = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ThreeDots = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var ThreeDots = exports.ThreeDots = function ThreeDots(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
viewBox: "0 0 120 30",
xmlns: "http://www.w3.org/2000/svg",
fill: props.color,
"aria-label": props.label
},
_react2.default.createElement(
"circle",
{ cx: "15", cy: "15", r: "15" },
_react2.default.createElement("animate", {
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "fillOpacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "60", cy: "15", r: "9", attributeName: "fillOpacity", from: "1", to: "0.3" },
_react2.default.createElement("animate", {
attributeName: "r",
from: "9",
to: "9",
begin: "0s",
dur: "0.8s",
values: "9;15;9",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "fillOpacity",
from: "0.5",
to: "0.5",
begin: "0s",
dur: "0.8s",
values: ".5;1;.5",
calcMode: "linear",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"circle",
{ cx: "105", cy: "15", r: "15" },
_react2.default.createElement("animate", {
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}),
_react2.default.createElement("animate", {
attributeName: "fillOpacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
})
)
);
};
var ThreeDots = function ThreeDots(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
viewBox: "0 0 120 30",
xmlns: "http://www.w3.org/2000/svg",
fill: props.color,
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("circle", {
cx: "15",
cy: "15",
r: props.radius + 6
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fillOpacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "60",
cy: "15",
r: props.radius,
attributeName: "fillOpacity",
from: "1",
to: "0.3"
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "r",
from: "9",
to: "9",
begin: "0s",
dur: "0.8s",
values: "9;15;9",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fillOpacity",
from: "0.5",
to: "0.5",
begin: "0s",
dur: "0.8s",
values: ".5;1;.5",
calcMode: "linear",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "105",
cy: "15",
r: props.radius + 6
}, /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}), /*#__PURE__*/_react["default"].createElement("animate", {
attributeName: "fillOpacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
})));
};
ThreeDots.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
ThreeDots.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.ThreeDots = ThreeDots;
ThreeDots.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
ThreeDots.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading",
radius: 9
};

93

dist/loader/Triangle.js

@@ -1,62 +0,43 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Triangle = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Triangle = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Triangle = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Triangle = exports.Triangle = function Triangle(props) {
return _react2.default.createElement(
"div",
{ className: "react-spinner-loader-svg" },
_react2.default.createElement(
"svg",
{
id: "triangle",
width: props.width,
height: props.height,
viewBox: "-3 -4 39 39",
"aria-label": props.label
},
_react2.default.createElement("polygon", { fill: "transparent", stroke: props.color, strokeWidth: "1", points: "16,0 32,32 0,32" })
)
);
};
var Triangle = function Triangle(props) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "react-spinner-loader-svg"
}, /*#__PURE__*/_react["default"].createElement("svg", {
id: "triangle",
width: props.width,
height: props.height,
viewBox: "-3 -4 39 39",
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("polygon", {
fill: "transparent",
stroke: props.color,
strokeWidth: "1",
points: "16,0 32,32 0,32"
})));
};
Triangle.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Triangle.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Triangle = Triangle;
Triangle.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string
};
Triangle.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};

190

dist/loader/Watch.js

@@ -1,116 +0,86 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "prop-types"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("prop-types"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.propTypes);
global.Watch = mod.exports;
}
})(this, function (exports, _react, _propTypes) {
"use strict";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Watch = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Watch = void 0;
var _react2 = _interopRequireDefault(_react);
var _react = _interopRequireDefault(require("react"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Watch = exports.Watch = function Watch(props) {
return _react2.default.createElement(
"svg",
{
width: props.width,
height: props.height,
version: "1.1",
id: "L2",
xmlns: "http://www.w3.org/2000/svg",
x: "0px",
y: "0px",
viewBox: "0 0 100 100",
enableBackground: "new 0 0 100 100",
xmlSpace: "preserve",
"aria-label": props.label
},
_react2.default.createElement("circle", {
fill: "none",
stroke: props.color,
strokeWidth: "4",
strokeMiterlimit: "10",
cx: "50",
cy: "50",
r: "48"
}),
_react2.default.createElement(
"line",
{
fill: "none",
strokeLinecap: "round",
stroke: props.color,
strokeWidth: "4",
strokeMiterlimit: "10",
x1: "50",
y1: "50",
x2: "85",
y2: "50.5"
},
_react2.default.createElement("animateTransform", {
attributeName: "transform",
dur: "2s",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
repeatCount: "indefinite"
})
),
_react2.default.createElement(
"line",
{
fill: "none",
strokeLinecap: "round",
stroke: props.color,
strokeWidth: "4",
strokeMiterlimit: "10",
x1: "50",
y1: "50",
x2: "49.5",
y2: "74"
},
_react2.default.createElement("animateTransform", {
attributeName: "transform",
dur: "15s",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
repeatCount: "indefinite"
})
)
);
};
var Watch = function Watch(props) {
return /*#__PURE__*/_react["default"].createElement("svg", {
width: props.width,
height: props.height,
version: "1.1",
id: "L2",
xmlns: "http://www.w3.org/2000/svg",
x: "0px",
y: "0px",
viewBox: "0 0 100 100",
enableBackground: "new 0 0 100 100",
xmlSpace: "preserve",
"aria-label": props.label
}, /*#__PURE__*/_react["default"].createElement("circle", {
fill: "none",
stroke: props.color,
strokeWidth: "4",
strokeMiterlimit: "10",
cx: "50",
cy: "50",
r: props.radius
}), /*#__PURE__*/_react["default"].createElement("line", {
fill: "none",
strokeLinecap: "round",
stroke: props.color,
strokeWidth: "4",
strokeMiterlimit: "10",
x1: "50",
y1: "50",
x2: "85",
y2: "50.5"
}, /*#__PURE__*/_react["default"].createElement("animateTransform", {
attributeName: "transform",
dur: "2s",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
repeatCount: "indefinite"
})), /*#__PURE__*/_react["default"].createElement("line", {
fill: "none",
strokeLinecap: "round",
stroke: props.color,
strokeWidth: "4",
strokeMiterlimit: "10",
x1: "50",
y1: "50",
x2: "49.5",
y2: "74"
}, /*#__PURE__*/_react["default"].createElement("animateTransform", {
attributeName: "transform",
dur: "15s",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
repeatCount: "indefinite"
})));
};
Watch.propTypes = {
height: _propTypes2.default.number,
width: _propTypes2.default.number,
color: _propTypes2.default.string,
label: _propTypes2.default.string
};
Watch.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading"
};
});
exports.Watch = Watch;
Watch.propTypes = {
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
color: _propTypes["default"].string,
label: _propTypes["default"].string,
radius: _propTypes["default"].number
};
Watch.defaultProps = {
height: 80,
width: 80,
color: "green",
label: "audio-loading",
radius: 48
};

79

package.json
{
"name": "react-loader-spinner",
"version": "3.2.4-rc-2",
"types": "dist/index.d.ts",
"version": "4.0.0",
"description": " react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.",
"unpkg": "dist/index.js",
"jsdelivr": "dist/index.js",
"main": "dist/index.js",
"repository": {

@@ -12,3 +12,6 @@ "type": "git",

},
"author": "Mohan Upadhyay",
"author": {
"name": "Mohan Upadhyay",
"url": "https://mohanpd.com.np"
},
"license": "MIT",

@@ -25,57 +28,33 @@ "bugs": {

],
"options": {
"mocha": "--require scripts/mocha_runner src/**/__tests__/**/*.js"
},
"types": "dist/types/index.d.ts",
"scripts": {
"prepublish": "babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist --copy-files",
"build": "babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist --copy-files",
"lint": "eslint ./src",
"lintfix": "eslint ./src --fix",
"testonly": "mocha $npm_package_options_mocha",
"test": "npm run lint && npm run testonly",
"test-watch": "npm run testonly -- --watch --watch-extensions js",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook --output-dir ./docs"
"build": "babel src -d dist --copy-files",
"release:major": "npm version major && git push --tags",
"release:minor": "npm version minor && git push --tags",
"release:patch": "npm version patch && git push --tags",
"release:beta": "npm version prerelease && npm run build && npm publish --tag beta",
"start": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"@storybook/addon-actions": "^5.1.10",
"@storybook/addon-centered": "^5.1.10",
"@storybook/addon-links": "^5.1.10",
"@storybook/addons": "^5.1.10",
"@storybook/react": "^5.1.10",
"babel-cli": "^6.6.4",
"babel-core": "^6.7.4",
"babel-eslint": "^10.0.2",
"babel-loader": "^7.1.5",
"babel-plugin-transform-es2015-modules-umd": "^6.6.5",
"babel-polyfill": "^6.7.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"chai": "^4.1.2",
"enzyme": "^3.3.0",
"eslint": "*",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-equimper": "*",
"eslint-config-prettier": "*",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "*",
"eslint-plugin-react": "^7.10.0",
"mocha": "^6.2.0",
"nodemon": "^1.17.2",
"prettier": "*",
"redux-logger": "*",
"sinon": "^7.3.2"
"react": "^16.13.1",
"react-is": "^16.13.1",
"react-dom": "^16.13.1",
"@babel/cli": "^7.11.6",
"babel-loader": "^8.1.0",
"@babel/core": "^7.11.6",
"@storybook/react": "^6.0.21",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@storybook/addon-links": "^6.0.21",
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-essentials": "^6.0.21"
},
"peerDependencies": {
"prop-types": "^15.6.2",
"react": "^16.8.6",
"react-dom": "^16.8.6"
"react": "*",
"react-dom": "*"
},
"dependencies": {
"babel-runtime": "^6.26.0",
"prop-types": "^15.6.2"
"prop-types": "^15.7.2"
}
}

137

README.md

@@ -1,54 +0,63 @@

<p align="center">
<img src="https://user-images.githubusercontent.com/33191954/33469873-6f57e560-d68d-11e7-8036-f2cb63175cc7.png" alt="title"/>
<div style="text-align:center;">
<p>
<img src="/logo/logo.png" alt="title"/>
</p>
</div>
`react-spinner-loader` provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.
react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.
### Installation
##### Using NPM:
#
```sh
$ npm install react-loader-spinner --save
```
##### Using yarn
#
```sh
$ yarn add ract-loader-spinner
$ yarn add react-loader-spinner
```
##### Import required css
#
```sh
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
```js
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
```
# Demo
# Demo
[View in page]
### Usage
### Usage
```
import Loader from 'react-loader-spinner'
export default class App extends React.Component {
```js
import Loader from "react-loader-spinner";
export default class App extends React.Component {
//other logic
render() {
return(
<Loader
type="Puff"
color="#00BFFF"
height="100"
width="100"
/>
);
}
}
render() {
return (
<Loader
type="Puff"
color="#00BFFF"
height={100}
width={100}
timeout={3000} //3 secs
/>
);
}
}
```
### If webpack throw issue with css. (For older version of this package)
### If webpack throws issue with css. (For older version of this package)
Change webpack config as:
``` test: /\.scss$/ to test: /\.s?css$/ ```
` test: /\.scss$/ to test: /\.s?css$/`
<br/><br/>

@@ -58,48 +67,54 @@ <small>Newer version just import css file from node modules to app.js<small>

### Types of Spinner
react-loader-spinner component has following types of spinner.
| Spinner Type | Implementation |
| ------ | ------ |
| Audio|``` <Loader type="Audio" color="#somecolor" height={80} width={80} />``` |
| Ball-Triangle | ``` <Loader type="BallTriangle" color="#somecolor" height={80} width={80} /> ```|
| Bars | ```<Loader type="Bars" color="#somecolor" height={80} width={80} />``` |
| Circles | ```<Loader type="Circles" color="#somecolor" height={80} width={80}/>``` |
| Grid|```<Loader type="Grid" color="#somecolor" height={80} width={80} />``` |
|Hearts|```<Loader type="Hearts" color="#somecolor" height={80} width={80} />```|
|Oval|```<Loader type="Oval" color="#somecolor" height={80} width={80} />```|
|Puff|```<Loader type="Puff" color="#somecolor" height={80} width={80} />```|
|Rings|```<Loader type="Rings" color="#somecolor" height={80} width={80} />```|
|TailSpin|```<Loader type="TailSpin" color="#somecolor" height={80} width={80} />```|
|ThreeDots|```<Loader type="ThreeDots" color="#somecolor" height={80} width={80} />```|
react-loader-spinner component has the following types of spinners.
> There are more. View [storybook] to see all list.
| Spinner Type | Implementation |
| ------------- | ----------------------------------------------------------------------- |
| Audio | ` <Loader type="Audio" color="#00BFFF" height={80} width={80} />` |
| Ball-Triangle | `<Loader type="BallTriangle" color="#00BFFF" height={80} width={80} />` |
| Bars | `<Loader type="Bars" color="#00BFFF" height={80} width={80} />` |
| Circles | `<Loader type="Circles" color="#00BFFF" height={80} width={80}/>` |
| Grid | `<Loader type="Grid" color="#00BFFF" height={80} width={80} />` |
| Hearts | `<Loader type="Hearts" color="#00BFFF" height={80} width={80} />` |
| Oval | `<Loader type="Oval" color="#00BFFF" height={80} width={80} />` |
| Puff | `<Loader type="Puff" color="#00BFFF" height={80} width={80} />` |
| Rings | `<Loader type="Rings" color="#00BFFF" height={80} width={80} />` |
| TailSpin | `<Loader type="TailSpin" color="#00BFFF" height={80} width={80} />` |
| ThreeDots | `<Loader type="ThreeDots" color="#00BFFF" height={80} width={80} />` |
> There are more. View [demo] to see the full list.
### PropTypes Available
react-loader-spinner component accept following props. Instructions on how to use them are below.
react-loader-spinner component accepts the following props. Instructions on how to use them are below.
| name | types | default | Detail |
| ------ | ------ |------|------|
| visible | String or boolean | false | Show/ Hide the loader as required. |
| type | String | "Audio" | Type of spinner you want to display. View the type in Types of Spinner section. |
| height | Number | 80 | Height props define the height of the svg spinner. Default height is 80px.|
| width | Number | 80 | Width props define the width of the spinner. |
| color | String | Blue" | [Color Props is provide color to the spinner |
| name | types | default | Detail |
| ---------------| ------------------ | ------------ | ------------------------------------------------------------------------------- |
| visible | String or boolean | false | Show/ Hide the loader as required. |
| type | String | "Audio" | Type of spinner you want to display. View the type in Types of Spinner section. |
| height | Number | 80 | Height prop define the height of the svg spinner. Default height is 80px. |
| width | Number | 80 | Width prop define the width of the spinner. |
| color | String | "Blue" | color prop is for adding color to the spinner |
| secondaryColor | String | "Grey" | secondaryColor prop for now is available on Plane and MutatingDots loaders |
| timeout | Number | 0 | Duration in milliseconds after which spinner is disabled |
| radius | Number | value varies | Set radius if the loader has a circle element in it |
### TODO LIST
* Change Docs on Storybooks
* Optimize css implementation
### Typescript
Typescript support is now also available. It has full **propType intellisense** support. Just install the component library as usual and use it in any *(React) \<Typescript\>* project.Finally, you will get all sorts of propType intellisense & static typeChecking out of the box. Just like Javascript **we also ❤ Typescript**.
<p align="center">
<img src="https://user-images.githubusercontent.com/61944859/89057235-1da6cf00-d37f-11ea-827e-17edbca46016.jpg" alt=""/>
</p>
License
----
### Here are the list of the task for which we want PR:
MIT
* Optimize css implementation
* Optimization for multiple color support.
- Optimize css implementation
- Add support for Typescript.
- Optimization for multiple color support.
## License
[svg-loader]: <https://github.com/SamHerbert/SVG-Loaders>
[here]: <http://samherbert.net/svg-loaders>
[View in page]: https://mhnpd.github.io/react-loader-spinner/
[storybook]: https://mhnpd.github.io/react-loader-spinner/
MIT
dist/index.d.ts
dist/loader/MutatingDot.js
index.js
react-loader-spinner.png
tsconfig.json
dist/loader/css/Plane.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc