Modern UI Download Button & Progress Card

<div class="download-card">
  <!-- File Header Info -->
  <div class="file-header">
    <div class="file-icon-box">
      <i class="fas fa-box-open"></i>
    </div>
    <div class="file-info">
      <h3 class="file-name">Modern_UI_Template.zip</h3>
      <span class="file-size" id="file-size-label">150 MB</span>
    </div>
  </div>

  <!-- Animated Progress Track -->
  <div class="progress-section">
    <div class="progress-bar-track">
      <div class="progress-bar-fill" id="progress-fill"></div>
    </div>
    <div class="progress-metrics-top">
      <span class="percent-label" id="percent-label">0%</span>
      <span class="speed-label" id="speed-label">0.00 MB/s</span>
    </div>
  </div>

  <!-- Metric Stats Grid -->
  <div class="metrics-grid">
    <div class="metric-box">
      <span class="m-label">Remaining</span>
      <span class="m-value" id="remaining-mb">150.0 MB</span>
    </div>
    <div class="metric-box">
      <span class="m-label">Status</span>
      <span class="m-value status-active" id="status-label">Ready</span>
    </div>
    <div class="metric-box">
      <span class="m-label">Time</span>
      <span class="m-value" id="time-remaining">-- sec</span>
    </div>
  </div>

  <!-- Action Button -->
  <button id="download-btn" class="btn-download-action">
    <i class="fas fa-arrow-down" id="btn-icon"></i>
    <span id="btn-label">Download File</span>
  </button>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.download-card {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(6, 182, 212, 0.15);
}

/* File Header */
.file-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.file-icon-box {
  width: 60px;
  height: 60px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #f59e0b;
}
.file-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}
.file-size {
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Progress Track */
.progress-section {
  margin-bottom: 20px;
}
.progress-bar-track {
  background: rgba(255, 255, 255, 0.08);
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 50%, #8b5cf6 100%);
  border-radius: 10px;
  transition: width 0.15s linear;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}
.progress-metrics-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 700;
}
.percent-label { color: #f8fafc; }
.speed-label { color: #38bdf8; font-family: monospace; }

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.metric-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}
.m-label {
  display: block;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.m-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #f8fafc;
}
.m-value.status-active { color: #38bdf8; }

/* Download Action Button */
.btn-download-action {
  width: 100%;
  background: linear-gradient(90deg, #06b6d4 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  padding: 16px;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.4);
}
.btn-download-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(6, 182, 212, 0.6);
}
.btn-download-action.completed {
  background: #10b981;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}

const totalSizeMB = 150;
let downloadedMB = 0;
let isDownloading = false;
let downloadTimer = null;

const btn = document.getElementById('download-btn');
const btnIcon = document.getElementById('btn-icon');
const btnLabel = document.getElementById('btn-label');
const progressFill = document.getElementById('progress-fill');
const percentLabel = document.getElementById('percent-label');
const speedLabel = document.getElementById('speed-label');
const remainingMB = document.getElementById('remaining-mb');
const statusLabel = document.getElementById('status-label');
const timeRemaining = document.getElementById('time-remaining');

btn.addEventListener('click', () => {
  if (isDownloading) {
    // Cancel or Pause
    clearInterval(downloadTimer);
    isDownloading = false;
    statusLabel.textContent = 'Paused';
    statusLabel.style.color = '#f59e0b';
    btnLabel.textContent = 'Resume Download';
    btnIcon.className = 'fas fa-play';
    return;
  }

  if (downloadedMB >= totalSizeMB) {
    // Reset
    downloadedMB = 0;
    progressFill.style.width = '0%';
    percentLabel.textContent = '0%';
    remainingMB.textContent = '150.0 MB';
    speedLabel.textContent = '0.00 MB/s';
    timeRemaining.textContent = '-- sec';
    statusLabel.textContent = 'Ready';
    statusLabel.style.color = '#38bdf8';
    btn.classList.remove('completed');
    btnLabel.textContent = 'Download File';
    btnIcon.className = 'fas fa-arrow-down';
    return;
  }

  // Start Download Simulation
  isDownloading = true;
  statusLabel.textContent = 'Downloading';
  statusLabel.style.color = '#38bdf8';
  btnLabel.textContent = 'Pause Download';
  btnIcon.className = 'fas fa-pause';

  downloadTimer = setInterval(() => {
    // Simulated varying transfer speed (4.8 to 6.2 MB/s)
    const speed = (Math.random() * 1.4 + 4.8);
    const step = speed * 0.2; // 200ms tick
    downloadedMB += step;

    if (downloadedMB >= totalSizeMB) {
      downloadedMB = totalSizeMB;
      clearInterval(downloadTimer);
      isDownloading = false;
      
      progressFill.style.width = '100%';
      percentLabel.textContent = '100%';
      remainingMB.textContent = '0.0 MB';
      speedLabel.textContent = '0.00 MB/s';
      timeRemaining.textContent = '0 sec';
      statusLabel.textContent = 'Completed';
      statusLabel.style.color = '#10b981';

      btn.classList.add('completed');
      btnLabel.textContent = 'Open Modern_UI_Template.zip';
      btnIcon.className = 'fas fa-check';
      return;
    }

    const pct = Math.round((downloadedMB / totalSizeMB) * 100);
    const leftMB = (totalSizeMB - downloadedMB).toFixed(1);
    const secLeft = Math.ceil((totalSizeMB - downloadedMB) / speed);

    progressFill.style.width = `${pct}%`;
    percentLabel.textContent = `${pct}%`;
    speedLabel.textContent = `${speed.toFixed(2)} MB/s`;
    remainingMB.textContent = `${leftMB} MB`;
    timeRemaining.textContent = `${secLeft} sec`;
  }, 200);
});