Loading Overlay

<div class="nuda-mdx-loadover" role="dialog" aria-modal="true" aria-label="Loading" aria-live="polite">
  <div class="nuda-mdx-loadover__veil"></div>
  <div class="nuda-mdx-loadover__box">
    <div class="nuda-mdx-loadover__ring">
      <svg class="nuda-mdx-loadover__svg" viewBox="0 0 40 40" fill="none" width="40" height="40">
        <circle class="nuda-mdx-loadover__track" cx="20" cy="20" r="16" stroke="rgba(255,255,255,.08)" stroke-width="3"/>
        <circle class="nuda-mdx-loadover__arc" cx="20" cy="20" r="16" stroke="#e4ff54" stroke-width="3" stroke-linecap="round" stroke-dasharray="60 41"/>
      </svg>
    </div>
    <p class="nuda-mdx-loadover__label">Processing…</p>
    <p class="nuda-mdx-loadover__sub">Please wait</p>
  </div>
</div>

.nuda-mdx-loadover {
  position: relative;
  width: 100%;
  height: 155px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
}

.nuda-mdx-loadover__veil {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}

.nuda-mdx-loadover__box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 1rem 1.4rem;
}

.nuda-mdx-loadover__ring {
  position: relative;
  width: 40px;
  height: 40px;
}

.nuda-mdx-loadover__svg {
  animation: _nuda-mdxSpin 1s linear infinite;
}

.nuda-mdx-loadover__label {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  color: #fafafa;
}

.nuda-mdx-loadover__sub {
  margin: 0;
  font-size: .62rem;
  color: #555;
}

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

@media (prefers-reduced-motion:reduce) {
  .nuda-mdx-loadover__svg {
    animation: none;
  }
}