Download Arrow

<button class="nuda-dl-btn" aria-label="Download">
  <svg class="nuda-dl-btn__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/>
  </svg>
  <svg class="nuda-dl-btn__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="20 6 9 17 4 12"/>
  </svg>
  <span class="nuda-dl-btn__spinner"></span>
</button>

/* Download Arrow
   Arrow animates to spinner then checkmark.
   Customize: --dl-accent */

.nuda-dl-btn {
  --dl-accent: #e4ff54;
  --dl-success: #22c55e;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: none;
  cursor: pointer;
  overflow: hidden;
  color: #ccc;
}

.nuda-dl-btn svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  will-change: transform, opacity;
}

.nuda-dl-btn__check {
  opacity: 0;
  transform: scale(0.5);
  color: var(--dl-success);
}

.nuda-dl-btn__spinner {
  position: absolute;
  inset: 2px;
  border: 2px solid transparent;
  border-top-color: var(--dl-accent);
  border-radius: 50%;
  opacity: 0;
}

.nuda-dl-btn--loading .nuda-dl-btn__arrow {
  opacity: 0;
  transform: translateY(20px);
}

.nuda-dl-btn--loading .nuda-dl-btn__spinner {
  opacity: 1;
  animation: nuda-dl-spin 0.6s linear infinite;
}

.nuda-dl-btn--done .nuda-dl-btn__arrow {
  opacity: 0;
  transform: scale(0.5);
}

.nuda-dl-btn--done .nuda-dl-btn__check {
  opacity: 1;
  transform: scale(1);
}

.nuda-dl-btn--done {
  border-color: rgba(34, 197, 94, 0.3);
}

@keyframes nuda-dl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-dl-btn svg { transition: none; }
  .nuda-dl-btn--loading .nuda-dl-btn__spinner { animation: none; }
}

/* Download Arrow — vanilla JS
   Simulates download with loading and success states. */

(function () {
  document.querySelectorAll(".nuda-dl-btn").forEach(function (btn) {
    btn.addEventListener("click", function () {
      if (btn.classList.contains("nuda-dl-btn--done")) return;
      btn.classList.add("nuda-dl-btn--loading");
      setTimeout(function () {
        btn.classList.remove("nuda-dl-btn--loading");
        btn.classList.add("nuda-dl-btn--done");
        setTimeout(function () {
          btn.classList.remove("nuda-dl-btn--done");
        }, 2000);
      }, 1200);
    });
  });
})();