{% macro loadding_style() %}

<style>
  #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);
    transform: rotate(8deg);
    animation: slow-rot 6s linear infinite;
    pointer-events: none;
  }

  @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;
    transform-origin: center;
    animation: bounce 1.1s infinite cubic-bezier(.2, .9, .3, 1);
  }

  .dot:nth-child(1) {
    animation-delay: 0s;
  }

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

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

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

  #zero-loadding::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 12px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(79, 122, 255, 0.06), rgba(47, 87, 214, 0.04));
    filter: blur(8px);
    opacity: 0.95;
    transform: translateY(2px);
    pointer-events: none;
  }

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

  #zero-loadding.hidden {display:none}
</style>
{% endmacro %}

{% macro loadding_html() %}
<div id="zero-loadding" aria-hidden="true">
  <div class="loader">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
{% endmacro %}

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