import { r as registerInstance, h, H as Host } from './core-b78a8f7e.js';

const Spinner = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    static toPixelSize(size) {
        switch (size) {
            case 'xsmall': {
                return 16;
            }
            case 'small': {
                return 24;
            }
            case 'large': {
                return 60;
            }
            default: {
                return 48;
            }
        }
    }
    render() {
        const size = `${Spinner.toPixelSize(this.size)}px`;
        return (h(Host, { style: { height: size, width: size } }, h("div", { class: "anj-fading-circle" }, h("div", { class: "anj-circle1 anj-circle" }), h("div", { class: "anj-circle2 anj-circle" }), h("div", { class: "anj-circle3 anj-circle" }), h("div", { class: "anj-circle4 anj-circle" }), h("div", { class: "anj-circle5 anj-circle" }), h("div", { class: "anj-circle6 anj-circle" }), h("div", { class: "anj-circle7 anj-circle" }), h("div", { class: "anj-circle8 anj-circle" }), h("div", { class: "anj-circle9 anj-circle" }), h("div", { class: "anj-circle10 anj-circle" }), h("div", { class: "anj-circle11 anj-circle" }), h("div", { class: "anj-circle12 anj-circle" }))));
    }
    static get style() { return "anj-spinner {\n  display: block;\n}\nanj-spinner[fixed] {\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  z-index: 1030;\n}\n\@-webkit-keyframes anj-circleFadeDelay {\n  0%, 39%, 100% {\n    opacity: 0;\n  }\n  40% {\n    opacity: 1;\n  }\n}\n\@keyframes anj-circleFadeDelay {\n  0%, 39%, 100% {\n    opacity: 0;\n  }\n  40% {\n    opacity: 1;\n  }\n}\nanj-spinner .anj-fading-circle {\n  margin: 0 auto;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\nanj-spinner .anj-fading-circle .anj-circle {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\nanj-spinner .anj-fading-circle .anj-circle::before {\n  content: \"\";\n  display: block;\n  margin: 0 auto;\n  width: 15%;\n  height: 15%;\n  background-color: var(--anj-primary);\n  border-radius: 100%;\n  -webkit-animation: anj-circleFadeDelay 1.2s infinite ease-in-out both;\n  animation: anj-circleFadeDelay 1.2s infinite ease-in-out both;\n}\nanj-spinner .anj-fading-circle .anj-circle2 {\n  -webkit-transform: rotate(30deg);\n  transform: rotate(30deg);\n}\nanj-spinner .anj-fading-circle .anj-circle3 {\n  -webkit-transform: rotate(60deg);\n  transform: rotate(60deg);\n}\nanj-spinner .anj-fading-circle .anj-circle4 {\n  -webkit-transform: rotate(90deg);\n  transform: rotate(90deg);\n}\nanj-spinner .anj-fading-circle .anj-circle5 {\n  -webkit-transform: rotate(120deg);\n  transform: rotate(120deg);\n}\nanj-spinner .anj-fading-circle .anj-circle6 {\n  -webkit-transform: rotate(150deg);\n  transform: rotate(150deg);\n}\nanj-spinner .anj-fading-circle .anj-circle7 {\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n}\nanj-spinner .anj-fading-circle .anj-circle8 {\n  -webkit-transform: rotate(210deg);\n  transform: rotate(210deg);\n}\nanj-spinner .anj-fading-circle .anj-circle9 {\n  -webkit-transform: rotate(240deg);\n  transform: rotate(240deg);\n}\nanj-spinner .anj-fading-circle .anj-circle10 {\n  -webkit-transform: rotate(270deg);\n  transform: rotate(270deg);\n}\nanj-spinner .anj-fading-circle .anj-circle11 {\n  -webkit-transform: rotate(300deg);\n  transform: rotate(300deg);\n}\nanj-spinner .anj-fading-circle .anj-circle12 {\n  -webkit-transform: rotate(330deg);\n  transform: rotate(330deg);\n}\nanj-spinner .anj-fading-circle .anj-circle2::before {\n  -webkit-animation-delay: -1.1s;\n  animation-delay: -1.1s;\n}\nanj-spinner .anj-fading-circle .anj-circle3::before {\n  -webkit-animation-delay: -1s;\n  animation-delay: -1s;\n}\nanj-spinner .anj-fading-circle .anj-circle4::before {\n  -webkit-animation-delay: -0.9s;\n  animation-delay: -0.9s;\n}\nanj-spinner .anj-fading-circle .anj-circle5::before {\n  -webkit-animation-delay: -0.8s;\n  animation-delay: -0.8s;\n}\nanj-spinner .anj-fading-circle .anj-circle6::before {\n  -webkit-animation-delay: -0.7s;\n  animation-delay: -0.7s;\n}\nanj-spinner .anj-fading-circle .anj-circle7::before {\n  -webkit-animation-delay: -0.6s;\n  animation-delay: -0.6s;\n}\nanj-spinner .anj-fading-circle .anj-circle8::before {\n  -webkit-animation-delay: -0.5s;\n  animation-delay: -0.5s;\n}\nanj-spinner .anj-fading-circle .anj-circle9::before {\n  -webkit-animation-delay: -0.4s;\n  animation-delay: -0.4s;\n}\nanj-spinner .anj-fading-circle .anj-circle10::before {\n  -webkit-animation-delay: -0.3s;\n  animation-delay: -0.3s;\n}\nanj-spinner .anj-fading-circle .anj-circle11::before {\n  -webkit-animation-delay: -0.2s;\n  animation-delay: -0.2s;\n}\nanj-spinner .anj-fading-circle .anj-circle12::before {\n  -webkit-animation-delay: -0.1s;\n  animation-delay: -0.1s;\n}"; }
};

export { Spinner as anj_spinner };
