react-text-spinners/dist/index.js

text-spinners as a React component

function ___$insertStyle(css) {
    if (!css || typeof window === 'undefined') {
        return;
    }
    const style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    style.innerHTML = css;
    document.head.appendChild(style);
    return css;
}

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function _interopNamespace(e) {
    if (e && e.__esModule) return e;
    var n = Object.create(null);
    if (e) {
        Object.keys(e).forEach(function (k) {
            if (k !== 'default') {
                var d = Object.getOwnPropertyDescriptor(e, k);
                Object.defineProperty(n, k, d.get ? d : {
                    enumerable: true,
                    get: function () { return e[k]; }
                });
            }
        });
    }
    n["default"] = e;
    return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);

___$insertStyle("@charset \"UTF-8\";\n/* --- Basics --- */\n.loading {\n  display: inline-block;\n  overflow: hidden;\n  height: 1.3em;\n  margin-top: -0.3em;\n  line-height: 1.5em;\n  vertical-align: text-bottom;\n}\n\n.loading::after {\n  display: inline-table;\n  white-space: pre;\n  text-align: left;\n}\n\n/* --- Types --- */\n/* default loading is ellip */\n.loading::after {\n  content: \"\\a.\\a..\\a...\";\n  animation: spin4 2s steps(4) infinite;\n}\n\n.loading.line::after {\n  content: \"/\\a–\\a\\\\\\a|\";\n  text-align: center;\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.line2::after {\n  content: \"╲\\a│\\a╱\\a─\";\n  text-align: center;\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.plus::after {\n  content: \"┽\\a╀\\a┾\\a╁\";\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.dots::after {\n  content: \"⠋\\a⠙\\a⠹\\a⠸\\a⠼\\a⠴\\a⠦\\a⠧\\a⠇\\a⠏\";\n  animation: spin10 1s steps(10) infinite;\n}\n\n.loading.dots2::after {\n  content: \"⠋\\a⠙\\a⠚\\a⠞\\a⠖\\a⠦\\a⠴\\a⠲\\a⠳\";\n  animation: spin9 1s steps(9) infinite;\n}\n\n.loading.dots3::after {\n  content: \"⋮\\a⋰\\a⋯\\a⋱\";\n  text-align: center;\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.lifting::after {\n  content: \"꜈꜍\\a꜉꜎\\a꜊꜏\\a꜋꜐\\a꜌꜑\";\n  animation: spin5 0.5s steps(5) infinite alternate;\n}\n\n.loading.hamburger::after {\n  content: \"☱\\a☲\\a☴\";\n  animation: spin3 0.3s steps(3) infinite alternate;\n}\n\n.loading.bar::after {\n  content: \"▏\\a▎\\a▍\\a▌\\a▋\\a▊\\a▉\";\n  animation: spin7 1s steps(7) infinite alternate;\n}\n\n.loading.bar2::after {\n  content: \"▁\\a▂\\a▃\\a▄\\a▅\\a▆\\a▇\\a█\";\n  animation: spin8 2s steps(8) infinite alternate;\n}\n\n.loading.circle::after {\n  content: \"◴\\a◷\\a◶\\a◵\";\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.open-circle::after {\n  content: \"◜\\a◠\\a◝\\a◞\\a◡\\a◟\";\n  animation: spin6 0.6s steps(6) infinite;\n}\n\n.loading.arrow::after {\n  content: \"←\\a↖\\a↑\\a↗\\a→\\a↘\\a↓\\a↙\";\n  animation: spin8 1s steps(8) infinite;\n}\n\n.loading.triangle::after {\n  content: \"◢\\a◣\\a◤\\a◥\";\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.triangles::after {\n  content: \"▹▹▹▹▹\\a▸▹▹▹▹\\a▹▸▹▹▹\\a▹▹▸▹▹\\a▹▹▹▸▹\\a▹▹▹▹▸\";\n  animation: spin6 1s steps(6) infinite;\n}\n\n.loading.beam::after {\n  content: \"\\a=   \\a==  \\a=== \\a====\\a  ===\\a   ==\\a    =\\a\";\n  animation: spin9 1.2s steps(9) infinite;\n  font-family: monospace;\n}\n\n.loading.bullet::after {\n  content: \" ●    \\a   ●   \\a    ●  \\a     ● \\a      ●\\a     ● \\a    ●  \\a   ●   \\a  ●    \\a●     \";\n  animation: spin10 1s steps(10) infinite;\n}\n\n.loading.bullseye::after {\n  content: \"◎◎◎\\a◉◎◎\\a◎◉◎\\a◎◎◉\";\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.rhomb::after {\n  content: \"◇◇◇\\a◈◇◇\\a◇◈◇\\a◇◇◈\";\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.fish::after {\n  content: \">))'>\\a >))'>\\a  >))'>\\a   >))'>\\a    >))'>\\a    <'((<\\a   <'((<\\a  <'((<\\a <'((<\\a<'((<\\a\";\n  animation: spin10 5s steps(10) infinite;\n}\n\n.loading.toggle::after {\n  content: \"⊶\\a⊷\";\n  animation: spin2 1s steps(2) infinite;\n}\n\n.loading.countdown::after {\n  content: \"0\\a 1\\a 2\\a 3\\a 4\\a 5\\a 6\\a 7\\a 8\\a 9\";\n  animation: spin10 10s steps(10) reverse;\n}\n\n.loading.time::after {\n  content: \"🕐\\a🕑\\a🕒\\a🕓\\a🕔\\a🕕\\a🕖\\a🕗\\a🕘\\a🕙\\a🕚\\a🕛\";\n  animation: spin12 3s steps(12) infinite;\n  width: 1.3em;\n}\n\n.loading.hearts::after {\n  content: \"💛\\a💙\\a💜\\a💚\";\n  animation: spin4 2s steps(4) infinite;\n  width: 1.3em;\n}\n\n.loading.earth::after {\n  content: \"🌍\\a🌎\\a🌏\";\n  animation: spin3 1s steps(3) infinite;\n  width: 1.3em;\n}\n\n.loading.moon::after {\n  content: \"🌑\\a🌒\\a🌓\\a🌔\\a🌕\\a🌖\\a🌗\\a🌘\";\n  animation: spin8 2s steps(8) infinite;\n  width: 1.3em;\n}\n\n.loading.monkey::after {\n  content: \"🙈\\a🙉\\a🙊\";\n  animation: spin3 1.5s steps(3) infinite;\n  width: 1.3em;\n}\n\n.loading.runner::after {\n  content: \"🚶\\a🏃\";\n  animation: spin2 1s steps(2) infinite;\n  width: 1.3em;\n}\n\n.loading.box-bounce::after {\n  content: \"▖\\a▘\\a▝\\a▗\";\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.star::after {\n  content: \"✶\\a✸\\a✹\\a✺\\a✹\\a✷\";\n  animation: spin6 1s steps(6) infinite;\n}\n\n.loading.matrix::after {\n  content: \"░ ░░░░\\a░░ ░░░\\a░░░ ░░\\a░░░░ ░\";\n  animation: spin4 0.5s steps(4) infinite alternate;\n}\n\n.loading.square::after {\n  content: \"◰\\a◳\\a◲\\a◱\";\n  animation: spin4 1s steps(4) infinite;\n}\n\n.loading.words::after {\n  content: \"Loading\\aStill loading\\aMostly done\\a A bit more \\a Almost done\\aReady-ish\";\n  animation: spin6 12s steps(6) infinite;\n}\n\n/* --- Animations --- */\n@keyframes spin1 {\n  to {\n    transform: translateY(-1.5em);\n  }\n}\n@keyframes spin2 {\n  to {\n    transform: translateY(-3em);\n  }\n}\n@keyframes spin3 {\n  to {\n    transform: translateY(-4.5em);\n  }\n}\n@keyframes spin4 {\n  to {\n    transform: translateY(-6em);\n  }\n}\n@keyframes spin5 {\n  to {\n    transform: translateY(-7.5em);\n  }\n}\n@keyframes spin6 {\n  to {\n    transform: translateY(-9em);\n  }\n}\n@keyframes spin7 {\n  to {\n    transform: translateY(-10.5em);\n  }\n}\n@keyframes spin8 {\n  to {\n    transform: translateY(-12em);\n  }\n}\n@keyframes spin9 {\n  to {\n    transform: translateY(-13.5em);\n  }\n}\n@keyframes spin10 {\n  to {\n    transform: translateY(-15em);\n  }\n}\n@keyframes spin11 {\n  to {\n    transform: translateY(-16.5em);\n  }\n}\n@keyframes spin12 {\n  to {\n    transform: translateY(-18em);\n  }\n}");

/**
 * Add a spinner.
 *
 * Available themes will auto-complete in the editor if you have auto-completion
 * enabled.
 *
 * See the docs for more information:
 * https://github.com/maxbeier/text-spinners
 */
function Spinner(_a) {
    var _b = _a.theme, theme = _b === void 0 ? "" : _b, _c = _a.size, size = _c === void 0 ? "2rem" : _c, _d = _a.color, color = _d === void 0 ? "#888" : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? "white" : _e, _f = _a.title, title = _f === void 0 ? "Loading..." : _f;
    var styles = {
        color: color,
        backgroundColor: backgroundColor,
        fontSize: size,
    };
    return (React__namespace.createElement("div", { className: "spinner loading ".concat(theme), style: styles, title: title }));
}

exports["default"] = Spinner;