@wener/console/lib/loader/GooeyLoader.js

Base console UI toolkit

function _tagged_template_literal(strings, raw) {
    if (!raw) {
        raw = strings.slice(0);
    }
    return Object.freeze(Object.defineProperties(strings, {
        raw: {
            value: Object.freeze(raw)
        }
    }));
}
function _templateObject() {
    var data = _tagged_template_literal([
        "\n	width: 200px;\n	height: 200px;\n	position: relative;\n	transform: translate(-50%, -50%);\n	margin: auto;\n	filter: url('#gooey-loader-filter');\n	animation: rotate-move 2s ease-in-out infinite;\n\n	.dot {\n		width: 70px;\n		height: 70px;\n		border-radius: 50%;\n		background-color: #000;\n		position: absolute;\n		top: 0;\n		bottom: 0;\n		left: 0;\n		right: 0;\n		margin: auto;\n	}\n\n	.dot-3 {\n		background-color: #f74d75;\n		animation:\n			dot-3-move 2s ease infinite,\n			index 6s ease infinite;\n	}\n\n	.dot-2 {\n		background-color: #10beae;\n		animation:\n			dot-2-move 2s ease infinite,\n			index 6s -4s ease infinite;\n	}\n\n	.dot-1 {\n		background-color: #ffe386;\n		animation:\n			dot-1-move 2s ease infinite,\n			index 6s -2s ease infinite;\n	}\n\n	@keyframes dot-3-move {\n		20% {\n			transform: scale(1);\n		}\n		45% {\n			transform: translateY(-18px) scale(0.45);\n		}\n		60% {\n			transform: translateY(-90px) scale(0.45);\n		}\n		80% {\n			transform: translateY(-90px) scale(0.45);\n		}\n		100% {\n			transform: translateY(0px) scale(1);\n		}\n	}\n\n	@keyframes dot-2-move {\n		20% {\n			transform: scale(1);\n		}\n		45% {\n			transform: translate(-16px, 12px) scale(0.45);\n		}\n		60% {\n			transform: translate(-80px, 60px) scale(0.45);\n		}\n		80% {\n			transform: translate(-80px, 60px) scale(0.45);\n		}\n		100% {\n			transform: translateY(0px) scale(1);\n		}\n	}\n\n	@keyframes dot-1-move {\n		20% {\n			transform: scale(1);\n		}\n		45% {\n			transform: translate(16px, 12px) scale(0.45);\n		}\n		60% {\n			transform: translate(80px, 60px) scale(0.45);\n		}\n		80% {\n			transform: translate(80px, 60px) scale(0.45);\n		}\n		100% {\n			transform: translateY(0px) scale(1);\n		}\n	}\n\n	@keyframes rotate-move {\n		55% {\n			transform: translate(-50%, -50%) rotate(0deg);\n		}\n		80% {\n			transform: translate(-50%, -50%) rotate(360deg);\n		}\n		100% {\n			transform: translate(-50%, -50%) rotate(360deg);\n		}\n	}\n\n	@keyframes index {\n		0%,\n		100% {\n			z-index: 3;\n		}\n		33.3% {\n			z-index: 2;\n		}\n		66.6% {\n			z-index: 1;\n		}\n	}\n"
    ]);
    _templateObject = function _templateObject() {
        return data;
    };
    return data;
}
import React from 'react';
import styled from '@emotion/styled';
var GooeyLoaderContainer = styled.div(_templateObject());
function loadSvgFilter() {
    if (typeof window === 'undefined') {
        return;
    }
    if (document.querySelector('#GooeyLoaderSvgFilter')) {
        return;
    }
    var el = document.createElement('div');
    el.id = 'GooeyLoaderSvgFilter';
    el.innerHTML = "\n<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>\n  <defs>\n    <filter id='gooey-loader-filter'>\n      <feGaussianBlur in='SourceGraphic' stdDeviation='10' result='blur' />\n      <feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7'/>\n    </filter>\n  </defs>\n</svg>\n";
    document.body.appendChild(el);
}
/**
 * GooeyLoader
 *
 * @see https://codepen.io/Izumenko/pen/MpWyXK
 */ export var GooeyLoader = function(props) {
    loadSvgFilter();
    return /*#__PURE__*/ React.createElement(GooeyLoaderContainer, props, /*#__PURE__*/ React.createElement("div", {
        className: "dot dot-1"
    }), /*#__PURE__*/ React.createElement("div", {
        className: "dot dot-2"
    }), /*#__PURE__*/ React.createElement("div", {
        className: "dot dot-3"
    }));
};