@wener/console
Version:
Base console UI toolkit
116 lines (115 loc) • 7.09 kB
JavaScript
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: 300px;\n height: 300px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: transparent;\n"
]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
function _templateObject1() {
var data = _tagged_template_literal([
"\n .circle-border {\n width: 150px;\n height: 150px;\n padding: 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background: rgb(63, 249, 220);\n background: linear-gradient(0deg, rgba(63, 249, 220, 0.1) 33%, rgba(63, 249, 220, 1) 100%);\n animation: spin 0.8s linear 0s infinite;\n }\n\n .circle-core {\n width: 100%;\n height: 100%;\n background-color: #37474f;\n border-radius: 50%;\n }\n\n @keyframes spin {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(359deg);\n }\n }\n"
]);
_templateObject1 = function _templateObject() {
return data;
};
return data;
}
function _templateObject2() {
var data = _tagged_template_literal([
"\n .pulse-container {\n width: 120px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .pulse-bubble {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #3ff9dc;\n }\n\n .pulse-bubble-1 {\n animation: pulse 0.4s ease 0s infinite alternate;\n }\n .pulse-bubble-2 {\n animation: pulse 0.4s ease 0.2s infinite alternate;\n }\n .pulse-bubble-3 {\n animation: pulse 0.4s ease 0.4s infinite alternate;\n }\n @keyframes pulse {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0.25;\n transform: scale(0.75);\n }\n }\n"
]);
_templateObject2 = function _templateObject() {
return data;
};
return data;
}
function _templateObject3() {
var data = _tagged_template_literal([
"\n .solar-system {\n width: 250px;\n height: 250px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .orbit {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid #ffffffa5;\n border-radius: 50%;\n }\n\n .earth-orbit {\n width: 165px;\n height: 165px;\n animation: spin 12s linear 0s infinite;\n }\n\n .venus-orbit {\n width: 120px;\n height: 120px;\n animation: spin 7.4s linear 0s infinite;\n }\n\n .mercury-orbit {\n width: 90px;\n height: 90px;\n animation: spin 3s linear 0s infinite;\n }\n\n .planet {\n position: absolute;\n top: -5px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #3ff9dc;\n }\n\n .sun {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n background-color: #ffab91;\n }\n"
]);
_templateObject3 = function _templateObject() {
return data;
};
return data;
}
function _templateObject4() {
var data = _tagged_template_literal([
"\n .leo {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n }\n\n .blue-orbit {\n width: 165px;\n height: 165px;\n border: 1px solid #91daffa5;\n -webkit-animation: spin3D 3s linear 0.2s infinite;\n }\n\n .green-orbit {\n width: 120px;\n height: 120px;\n border: 1px solid #91ffbfa5;\n -webkit-animation: spin3D 2s linear 0s infinite;\n }\n\n .red-orbit {\n width: 90px;\n height: 90px;\n border: 1px solid #ffca91a5;\n -webkit-animation: spin3D 1s linear 0s infinite;\n }\n\n .white-orbit {\n width: 60px;\n height: 60px;\n border: 2px solid #ffffff;\n -webkit-animation: spin3D 10s linear 0s infinite;\n }\n\n .w1 {\n transform: rotate3D(1, 1, 1, 90deg);\n }\n\n .w2 {\n transform: rotate3D(1, 2, 0.5, 90deg);\n }\n\n .w3 {\n transform: rotate3D(0.5, 1, 2, 90deg);\n }\n\n @keyframes spin {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(359deg);\n }\n }\n\n @keyframes spin3D {\n from {\n transform: rotate3d(0.5, 0.5, 0.5, 360deg);\n }\n to {\n transform: rotate3d(0deg);\n }\n }\n"
]);
_templateObject4 = function _templateObject() {
return data;
};
return data;
}
import React from 'react';
import styled from '@emotion/styled';
// loader from https://codepen.io/AlexWarnes/pen/jXYYKL
var SpinnerBox = styled.div(_templateObject());
var GradientSpinnerBox = styled(SpinnerBox)(_templateObject1());
var PulseBubbleBox = styled(SpinnerBox)(_templateObject2());
export var GradientSpinner = function() {
return /*#__PURE__*/ React.createElement(GradientSpinnerBox, null, /*#__PURE__*/ React.createElement("div", {
className: "circle-border"
}, /*#__PURE__*/ React.createElement("div", {
className: "circle-core"
})));
};
export var PulseBubble = function() {
return /*#__PURE__*/ React.createElement(PulseBubbleBox, null, /*#__PURE__*/ React.createElement("div", {
className: "pulse-container"
}, /*#__PURE__*/ React.createElement("div", {
className: "pulse-bubble pulse-bubble-1"
}), /*#__PURE__*/ React.createElement("div", {
className: "pulse-bubble pulse-bubble-2"
}), /*#__PURE__*/ React.createElement("div", {
className: "pulse-bubble pulse-bubble-3"
})));
};
var SolarSystemBox = styled(SpinnerBox)(_templateObject3());
export var SolarSystemSpinner = function() {
return /*#__PURE__*/ React.createElement(SolarSystemBox, null, /*#__PURE__*/ React.createElement("div", {
className: "solar-system"
}, /*#__PURE__*/ React.createElement("div", {
className: "earth-orbit orbit"
}, /*#__PURE__*/ React.createElement("div", {
className: "planet earth"
}), /*#__PURE__*/ React.createElement("div", {
className: "venus-orbit orbit"
}, /*#__PURE__*/ React.createElement("div", {
className: "planet venus"
}), /*#__PURE__*/ React.createElement("div", {
className: "mercury-orbit orbit"
}, /*#__PURE__*/ React.createElement("div", {
className: "planet mercury"
}), /*#__PURE__*/ React.createElement("div", {
className: "sun"
}))))));
};
var PlanetRotatingBox = styled(SpinnerBox)(_templateObject4());
export var PlantRotating = function() {
return /*#__PURE__*/ React.createElement(PlanetRotatingBox, null, /*#__PURE__*/ React.createElement("div", {
className: "blue-orbit leo"
}), /*#__PURE__*/ React.createElement("div", {
className: "green-orbit leo"
}), /*#__PURE__*/ React.createElement("div", {
className: "red-orbit leo"
}), /*#__PURE__*/ React.createElement("div", {
className: "white-orbit w1 leo"
}), /*#__PURE__*/ React.createElement("div", {
className: "white-orbit w2 leo"
}), /*#__PURE__*/ React.createElement("div", {
className: "white-orbit w3 leo"
}));
};