@wener/ui/lib/src/loaders/AlexWarnesCssLoader.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlantRotating = exports.PlanetRotatingBox = exports.SolarSystemSpinner = exports.PulseBubble = exports.GradientSpinner = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
// loader from https://codepen.io/AlexWarnes/pen/jXYYKL
const SpinnerBox = styled_components_1.default.div `
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
`;
const GradientSpinnerBox = styled_components_1.default(SpinnerBox) `
  .circle-border {
    width: 150px;
    height: 150px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgb(63, 249, 220);
    background: linear-gradient(0deg, rgba(63, 249, 220, 0.1) 33%, rgba(63, 249, 220, 1) 100%);
    animation: spin 0.8s linear 0s infinite;
  }

  .circle-core {
    width: 100%;
    height: 100%;
    background-color: #37474f;
    border-radius: 50%;
  }

  @keyframes spin {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(359deg);
    }
  }
`;
const PulseBubbleBox = styled_components_1.default(SpinnerBox) `
  .pulse-container {
    width: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pulse-bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #3ff9dc;
  }

  .pulse-bubble-1 {
    animation: pulse 0.4s ease 0s infinite alternate;
  }
  .pulse-bubble-2 {
    animation: pulse 0.4s ease 0.2s infinite alternate;
  }
  .pulse-bubble-3 {
    animation: pulse 0.4s ease 0.4s infinite alternate;
  }
  @keyframes pulse {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0.25;
      transform: scale(0.75);
    }
  }
`;
exports.GradientSpinner = () => {
    return (react_1.default.createElement(GradientSpinnerBox, null,
        react_1.default.createElement("div", { className: "circle-border" },
            react_1.default.createElement("div", { className: "circle-core" }))));
};
exports.PulseBubble = () => {
    return (react_1.default.createElement(PulseBubbleBox, null,
        react_1.default.createElement("div", { className: "pulse-container" },
            react_1.default.createElement("div", { className: "pulse-bubble pulse-bubble-1" }),
            react_1.default.createElement("div", { className: "pulse-bubble pulse-bubble-2" }),
            react_1.default.createElement("div", { className: "pulse-bubble pulse-bubble-3" }))));
};
const SolarSystemBox = styled_components_1.default(SpinnerBox) `
  .solar-system {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .orbit {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ffffffa5;
    border-radius: 50%;
  }

  .earth-orbit {
    width: 165px;
    height: 165px;
    animation: spin 12s linear 0s infinite;
  }

  .venus-orbit {
    width: 120px;
    height: 120px;
    animation: spin 7.4s linear 0s infinite;
  }

  .mercury-orbit {
    width: 90px;
    height: 90px;
    animation: spin 3s linear 0s infinite;
  }

  .planet {
    position: absolute;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3ff9dc;
  }

  .sun {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ffab91;
  }
`;
exports.SolarSystemSpinner = () => {
    return (react_1.default.createElement(SolarSystemBox, null,
        react_1.default.createElement("div", { className: "solar-system" },
            react_1.default.createElement("div", { className: "earth-orbit orbit" },
                react_1.default.createElement("div", { className: "planet earth" }),
                react_1.default.createElement("div", { className: "venus-orbit orbit" },
                    react_1.default.createElement("div", { className: "planet venus" }),
                    react_1.default.createElement("div", { className: "mercury-orbit orbit" },
                        react_1.default.createElement("div", { className: "planet mercury" }),
                        react_1.default.createElement("div", { className: "sun" })))))));
};
exports.PlanetRotatingBox = styled_components_1.default(SpinnerBox) `
  .leo {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .blue-orbit {
    width: 165px;
    height: 165px;
    border: 1px solid #91daffa5;
    -webkit-animation: spin3D 3s linear 0.2s infinite;
  }

  .green-orbit {
    width: 120px;
    height: 120px;
    border: 1px solid #91ffbfa5;
    -webkit-animation: spin3D 2s linear 0s infinite;
  }

  .red-orbit {
    width: 90px;
    height: 90px;
    border: 1px solid #ffca91a5;
    -webkit-animation: spin3D 1s linear 0s infinite;
  }

  .white-orbit {
    width: 60px;
    height: 60px;
    border: 2px solid #ffffff;
    -webkit-animation: spin3D 10s linear 0s infinite;
  }

  .w1 {
    transform: rotate3D(1, 1, 1, 90deg);
  }

  .w2 {
    transform: rotate3D(1, 2, 0.5, 90deg);
  }

  .w3 {
    transform: rotate3D(0.5, 1, 2, 90deg);
  }

  @keyframes spin {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(359deg);
    }
  }

  @keyframes spin3D {
    from {
      transform: rotate3d(0.5, 0.5, 0.5, 360deg);
    }
    to {
      transform: rotate3d(0deg);
    }
  }
`;
exports.PlantRotating = () => {
    return (react_1.default.createElement(exports.PlanetRotatingBox, null,
        react_1.default.createElement("div", { className: "blue-orbit leo" }),
        react_1.default.createElement("div", { className: "green-orbit leo" }),
        react_1.default.createElement("div", { className: "red-orbit leo" }),
        react_1.default.createElement("div", { className: "white-orbit w1 leo" }),
        react_1.default.createElement("div", { className: "white-orbit w2 leo" }),
        react_1.default.createElement("div", { className: "white-orbit w3 leo" })));
};
//# sourceMappingURL=AlexWarnesCssLoader.js.map