How does the gradient shine animation work on the button?

The gradient shine uses two techniques. The ::before pseudo-element creates a blurred ambient gradient glow that transitions from left: -40% to left: 120% using CSS transition when a .pulse class is added. A separate .shine span uses CSS @keyframes (named 'shine') to sweep a white gradient from translateX(-130%) to translateX(130%) across the button with skewX(-12deg) for a diagonal appearance. The .shining class triggers this animation. JavaScript adds .shining periodically during the progress simulation for a realistic feel.

How does the JavaScript progress bar simulation work?

The simulateDownload function uses a recursive step() function called via setTimeout. Each call adds a random delta between 2 and 10 to the progress percentage (p), then calls bar.style.width = p + '%' and updates the percent display element. If p < 100, step is called again after a random delay between 140ms and 500ms. This creates organic-looking uneven progress. When p reaches 100, finishDownload() is called, which adds the .success class and uses JavaScript's Blob API to trigger a real file download.

How does the Blob API create a real file download in JavaScript?

The finishDownload function creates a Blob object with text content, generates an object URL with URL.createObjectURL(blob), creates a temporary anchor element, sets its href to the object URL and download attribute to the filename, appends it to the body, clicks it programmatically, then removes it and revokes the URL with URL.revokeObjectURL. This triggers a real browser file download of a generated text file without any server or backend required.

What CSS techniques are used in the animated download button?

The animated download button uses: CSS custom properties (--accent, --bg, --card, --glass, --success) for theming, radial-gradient for the dark body background, glassmorphism (semi-transparent rgba background, backdrop blur effect, subtle border), absolute positioning for the .bar progress bar and .shine element, CSS @keyframes for the shine sweep animation, transform: translateY(-3px) hover lift effect, and class-based state management (.pulse, .shining, .success) toggled by JavaScript. The check SVG uses transform: scale(0) → scale(1) for a pop-in reveal.

Can I use this animated download button in a real website?

Yes. Replace the simulated progress logic with real XMLHttpRequest or fetch progress events. Use xhr.onprogress = (e) => { const pct = (e.loaded / e.total) * 100; bar.style.width = pct + '%'; } instead of the setTimeout simulation. The CSS, button structure, shine animation, success state, and Blob download logic all work with real download progress. The component is accessible with ARIA attributes (aria-live, aria-hidden, role) and keyboard-navigable with Enter/Space key support.

Animated Download Button with Progress Bar – Free HTML CSS JavaScript UI Component

Name: Animated Download Button with Progress Bar
Availability: InStock
Author: Coodeverse

⬇ Full Source Code

// index.html — Animated Download Button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Animated Download Button</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="card" role="region" aria-label="Download demo">
    <h1>Animated Download Button</h1>
    <p>Click the button to simulate a download with progress, finish state, and a lively gradient animation.</p>

    <div class="download-wrap">

      <!-- Main button -->
      <button id="downloadBtn" class="btn" aria-live="polite">

        <!-- Download arrow icon -->
        <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M12 3v12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8.5 10.5L12 14l3.5-3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M21 21H3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
        </svg>

        <span class="label">Download</span>

        <!-- Success checkmark icon -->
        <svg class="check" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M20 6L9 17l-5-5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>

        <span class="shine"></span>  <!-- Shine sweep -->
        <span class="bar" aria-hidden="true"></span>  <!-- Progress bar -->
      </button>

      <!-- Progress % + file info -->
      <div style="flex:1;display:flex;flex-direction:column">
        <div style="display:flex;align-items:center;justify-content:flex-end;gap:8px">
          <div id="percent" style="font-size:13px;color:var(--muted);min-width:40px;text-align:right">0%</div>
        </div>
        <div class="note">File: <strong>demo-file.txt</strong> — 14 KB</div>
      </div>

    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

// style.css — Animated Download Button

/* CSS Custom Properties — theme tokens */
:root {
  --bg:      #0f172a;
  --card:    #0b1220;
  --accent:  linear-gradient(90deg, #7c3aed, #06b6d4);
  --muted:   #94a3b8;
  --glass:   rgba(255,255,255,0.04);
  --success: #10b981;
}

* { box-sizing: border-box; }

/* Dark radial gradient body */
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.10), transparent),
    radial-gradient(800px 400px at 90% 90%, rgba(6,182,212,0.06), transparent),
    var(--bg);
  color: #e6eef8;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

/* Glassmorphism card */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 16px;
  padding: 28px;
  width: 360px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.04);
}
h1 { font-size: 18px; margin: 0 0 12px; }
p  { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

.download-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Button base — glassmorphism */
.btn {
  --pad: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad);
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,0.5);
  position: relative;
  overflow: hidden;
  min-width: 160px;
  justify-content: center;
}
.btn:active  { transform: translateY(2px); }
.btn:hover   { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(2,6,23,0.6); }
.btn:focus   { outline: 3px solid rgba(99,102,241,0.18); outline-offset: 4px; }
.btn .label  { font-weight: 600; font-size: 14px; }

/* Ambient glow that sweeps right on .pulse */
.btn::before {
  content: "";
  position: absolute;
  left: -40%; top: 0;
  height: 100%; width: 40%;
  background: var(--accent);
  filter: blur(18px);
  opacity: 0.35;
  transform: skewX(-12deg);
  transition: left .9s cubic-bezier(.2,.9,.3,1);
}
.btn.pulse::before { left: 120%; }

/* Progress bar — absolute bottom */
.bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
  background: var(--accent);
  width: 0%;
  transition: width .2s linear;
}

/* Success state — green button */
.btn.success {
  background: linear-gradient(180deg, rgba(16,185,129,0.12), rgba(16,185,129,0.06));
  border-color: rgba(16,185,129,0.18);
}

.note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* Diagonal shine sweep animation */
@keyframes shine {
  from { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  40%  { opacity: 0.6; }
  to   { transform: translateX(130%) skewX(-12deg);  opacity: 0; }
}
.btn .shine {
  position: absolute;
  left: -130%; top: 0;
  height: 100%; width: 36%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.12),
    rgba(255,255,255,0)
  );
  transform: skewX(-12deg);
  pointer-events: none;
  opacity: 0;
}
.btn.shining .shine { animation: shine 1.1s ease-in-out forwards; }

/* Check icon — pops in on success */
.icon  { width: 18px; height: 18px; flex: 0 0 18px; }
.check {
  width: 18px; height: 18px;
  display: inline-block;
  transform: scale(0);
  transition: transform .28s cubic-bezier(.2,.9,.3,1);
  opacity: 0;
}
.btn.success .check { transform: scale(1); opacity: 1; }

@media (max-width: 420px) { .card { width: 100%; } }

// script.js — Animated Download Button

const btn     = document.getElementById('downloadBtn');
const bar     = btn.querySelector('.bar');
const percent = document.getElementById('percent');
const label   = btn.querySelector('.label');

let running = false;

function simulateDownload() {
  if (running) return;      // prevent double-click
  running = true;

  // Remove any previous success state
  btn.classList.remove('success');

  // Trigger ambient glow sweep + initial shine
  btn.classList.add('pulse', 'shining');
  label.textContent = 'Preparing...';

  // Stop first shine after 1.1s
  setTimeout(() => btn.classList.remove('shining'), 1100);

  let p = 0;

  // Recursive progress step — random delta, random delay
  const step = () => {
    const delta = 2 + Math.random() * 8;     // 2–10% per step
    p = Math.min(100, p + delta);

    bar.style.width    = p + '%';
    percent.textContent = Math.round(p) + '%';

    if (p < 100) {
      // Occasional extra shine sweep (~25% chance)
      if (Math.random() < 0.25) {
        btn.classList.add('shining');
        setTimeout(() => btn.classList.remove('shining'), 900);
      }
      // Random delay 140–500ms for organic feel
      setTimeout(step, 140 + Math.random() * 360);
    } else {
      finishDownload();
    }
  };

  // Small delay before first step
  setTimeout(step, 300);
}

function finishDownload() {
  label.textContent = 'Downloaded ✓';
  btn.classList.remove('pulse');
  btn.classList.add('success');
  percent.textContent = '100%';

  // Create real file download via Blob API
  const content = 'This is a demo file generated at ' + new Date().toLocaleString();
  const blob    = new Blob([content], { type: 'text/plain' });
  const url     = URL.createObjectURL(blob);
  const a       = document.createElement('a');
  a.href        = url;
  a.download    = 'demo-file.txt';
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);

  running = false;

  // Reset after 2.5s
  setTimeout(() => {
    bar.style.width     = '0%';
    percent.textContent = '0%';
    label.textContent   = 'Download';
    btn.classList.remove('success');
  }, 2500);
}

// Mouse click
btn.addEventListener('click', simulateDownload);

// Keyboard: Enter or Space
btn.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    simulateDownload();
  }
});

// download_btn_faq

Animated Download Button — FAQ

How the progress bar, animations, and Blob download work.

How do I create an animated download button with a progress bar in HTML CSS JavaScript?

Create a button with a .bar span absolutely positioned at the bottom (height: 4px, width: 0%, transition: width .2s linear). Use CSS custom properties for gradient coloring. In JavaScript, use a recursive step() function with setTimeout to randomly increment the bar's width from 0% to 100%. Add gradient shine via CSS @keyframes on a separate .shine span. On completion, add a success CSS class and use the Blob API to trigger a real file download.

How does the gradient shine animation work?

Two techniques create the shine. The ::before pseudo-element creates a blurred ambient glow that slides from left:-40% to left:120% via CSS transition when .pulse is added. A separate .shine span uses @keyframes shine to sweep a white gradient from translateX(-130%) to translateX(130%) with skewX(-12deg) for a diagonal effect. JavaScript adds the .shining class periodically during progress for an organic shimmer feeling.

How does the JavaScript progress simulation work?

The simulateDownload function initializes running = true (prevents double-clicks) and calls a recursive step() via setTimeout. Each step adds a random 2–10% delta to p (capped at 100), then updates bar.style.width and percent.textContent. The delay before the next step is randomly 140–500ms, creating organic-looking uneven progress. When p hits 100, finishDownload() is called.

How does the Blob API create a real file download?

finishDownload() creates a Blob with generated text content, calls URL.createObjectURL(blob) to get a temporary URL, creates a hidden anchor element with href set to that URL and download='demo-file.txt', appends it to the body, clicks it programmatically, then removes the anchor and revokes the URL. This triggers a real browser file download with zero server or backend required — pure client-side JavaScript.

Can I use this button with a real download instead of simulated progress?

Yes. Replace the setTimeout simulation with XMLHttpRequest or fetch progress events. For XHR: xhr.onprogress = (e) => { if (e.lengthComputable) { const pct = (e.loaded / e.total) * 100; bar.style.width = pct + '%'; percent.textContent = Math.round(pct) + '%'; } }. The CSS, button structure, shine animation, success state styling, and reset logic all work identically with real download progress. The component is keyboard-accessible (Enter/Space) and uses ARIA aria-live for screen reader announcements.

Is this project good for learning JavaScript?

Yes. This project teaches: CSS custom properties and glassmorphism styling, CSS @keyframes for the shine animation, JavaScript class-based state management (.pulse, .shining, .success), recursive setTimeout for animation control, the JavaScript Blob API for client-side file generation, DOM manipulation and inline style updates, and ARIA accessibility attributes (aria-live, aria-hidden). Download the full source code free from Coodeverse.

Animated Download
Button + Progress Bar

⬇ Button State Reference

Animated Download Button — FAQ

Master CSS & JavaScript.
Build Pro UI Components.

⬇ Button State Reference

Animated Download Button — FAQ

Master CSS & JavaScript.Build Pro UI Components.

Master CSS & JavaScript.
Build Pro UI Components.