{% macro define_script() %}

<script data-name="ZeroLoading define">
class ZeroLoading extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: "open" });

        shadow.innerHTML = `
<style>
  :host {
    display: block;
  }
  #zero-loadding {
    width: 260px;
    height: 140px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 255, 0.75));
    box-shadow:
      0 10px 30px rgba(24, 40, 80, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 9999;
  }

  #zero-loadding::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    top: -40px;
    right: -60px;
    background: conic-gradient(from 120deg, rgba(200, 215, 255, 0.18), rgba(230, 230, 255, 0.06));
    filter: blur(18px);
    animation: slow-rot 6s linear infinite;
  }

  @keyframes slow-rot {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .loader {
    width: 120px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }

  .dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(104, 184, 93, 0.5), rgba(104, 184, 93, 1));
    box-shadow: 0 6px 18px rgba(47, 87, 214, 0.22), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
    animation: bounce 1.1s infinite cubic-bezier(.2, .9, .3, 1);
  }

  .dot:nth-child(2) { animation-delay: 0.14s; }
  .dot:nth-child(3) { animation-delay: 0.28s; }

  @keyframes bounce {
    25% { transform: translateY(-8px) scale(1.08); opacity: 1; }
  }

  @media (max-width: 340px) {
    #zero-loadding { width: 220px; height: 120px; border-radius: 12px; }
    .loader { width: 100px; }
    .dot { width: 16px; height: 16px; }
  }
</style>

<div id="zero-loadding">
  <div class="loader">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
    `;
        this.$root = shadow.querySelector("#zero-loadding");
        this.updateVisibility();
    }

    static get observedAttributes() {
        return ["hidden"];
    }

    attributeChangedCallback() {
        this.updateVisibility();
    }

    updateVisibility() {
        this.$root.style.display = this.hasAttribute('hidden') ? 'none' : 'flex';
    }
}

customElements.define('zero-loadding', ZeroLoading);
</script>
{% endmacro %}


{% macro html() %}
<zero-loadding></zero-loadding>
{% endmacro %}

{% macro vue_mounted() %}
onMounted(()=> document.querySelector('zero-loadding').setAttribute('hidden', ''))
{% endmacro %}