Download Button

<button class="dl-btn" id="dlBtn" type="button">
  <div class="dl-progress-bg" id="dlProgress"></div>
  <div class="dl-content" id="dlContent">
    <span class="dl-icon">⬇️</span>
    <span id="dlText">Download PDF</span>
  </div>
</button>

<style>
.dl-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-width: 220px;
  background: #3b82f6; color: #fff;
  border: none; padding: 0.85rem 1.5rem;
  border-radius: 0.6rem;
  font-size: 0.9rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  overflow: hidden; user-select: none;
}
.dl-btn:hover:not(:disabled) { background: #2563eb; }
.dl-btn:active:not(:disabled) { transform: scale(0.98); }
.dl-btn:disabled { cursor: default; }

.dl-btn.downloading {
  background: #1e293b;
  border: 1px solid #3b82f6;
  color: #60a5fa;
}
.dl-btn.success { background: #16a34a; }
.dl-btn.success:hover { background: #16a34a; }
.dl-btn.error { background: #dc2626; }

.dl-progress-bg {
  position: absolute; inset: 0;
  background: rgba(59, 130, 246, 0.15);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.15s linear;
  z-index: 0;
}
.dl-btn.downloading .dl-progress-bg {
  background: rgba(59, 130, 246, 0.25);
}
.dl-content {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center;
  gap: 0.5rem;
}
.dl-icon {
  display: inline-block;
  transition: transform 0.2s;
}
.dl-btn.downloading .dl-icon {
  animation: bounce 0.6s infinite alternate;
}
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(2px); }
}
.dl-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(96, 165, 250, 0.3);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>

<script>
const dlBtn = document.getElementById('dlBtn');
const dlProgress = document.getElementById('dlProgress');
const dlContent = document.getElementById('dlContent');
const dlText = document.getElementById('dlText');

async function downloadFile(url, filename) {
  // Set downloading state
  dlBtn.className = 'dl-btn downloading';
  dlBtn.disabled = true;
  dlContent.innerHTML = '<span class="dl-spinner"></span> Downloading...';

  try {
    // Fetch with progress tracking
    const response = await fetch(url);
    if (!response.ok) throw new Error('Download failed');

    const contentLength = response.headers.get('content-length');
    const total = contentLength ? parseInt(contentLength, 10) : 0;

    const reader = response.body.getReader();
    const chunks = [];
    let received = 0;

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      chunks.push(value);
      received += value.length;

      if (total > 0) {
        const percent = (received / total) * 100;
        dlProgress.style.transform = `scaleX(${percent / 100})`;
        dlContent.innerHTML = `<span class="dl-spinner"></span> ${Math.round(percent)}%`;
      }
    }

    // Create blob and trigger download
    const blob = new Blob(chunks);
    const blobUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(blobUrl);

    // Success state
    dlBtn.className = 'dl-btn success';
    dlContent.innerHTML = '<span>✅</span> Downloaded!';

    // Reset after 3 seconds
    setTimeout(() => {
      dlBtn.className = 'dl-btn';
      dlBtn.disabled = false;
      dlContent.innerHTML = '<span class="dl-icon">⬇️</span> <span id="dlText">Download PDF</span>';
      dlProgress.style.transform = 'scaleX(0)';
    }, 3000);

  } catch (err) {
    // Error state
    dlBtn.className = 'dl-btn error';
    dlContent.innerHTML = '<span>❌</span> Failed — Retry';
    dlBtn.disabled = false;
    dlProgress.style.transform = 'scaleX(0)';

    // Reset on click
    dlBtn.onclick = () => {
      dlBtn.className = 'dl-btn';
      dlContent.innerHTML = '<span class="dl-icon">⬇️</span> <span id="dlText">Download PDF</span>';
      dlBtn.onclick = () => downloadFile(url, filename);
    };
  }
}

dlBtn.addEventListener('click', () => {
  downloadFile('/files/project-guide.pdf', 'project-guide.pdf');
});
</script>