Async Progress-Fill Button — Real Step-Based Progress, Not a Fake Timed Animation

<div class="demo">
  <button class="fill-btn" id="fillBtn">
    <span class="fill-btn-bg" id="fillBg"></span>
    <span class="fill-btn-label" id="fillLabel">Generate report</span>
  </button>
  <p class="fill-hint">Click to start a multi-step process — the fill tracks REAL step progress, not a decorative animation timed to guess how long the work takes.</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 280px; max-width: 100%; }

.fill-btn { position: relative; width: 100%; padding: 13px; border: none; border-radius: 12px; background: #4f46e5; cursor: pointer; font-family: inherit; overflow: hidden; }
.fill-btn:disabled { cursor: default; }

.fill-btn-bg { position: absolute; inset: 0; background: #4338ca; width: 0%; transition: width 0.3s ease; }
.fill-btn-label { position: relative; z-index: 1; font-size: 13.5px; font-weight: 700; color: #fff; }

.fill-btn.success .fill-btn-bg { background: #059669; width: 100%; }
.fill-btn.error .fill-btn-bg { background: #dc2626; width: 100%; }

.fill-hint { font-size: 11px; color: #94a3b8; text-align: center; line-height: 1.6; }

const btn = document.getElementById('fillBtn');
const bg = document.getElementById('fillBg');
const label = document.getElementById('fillLabel');

// Each step's own weight reflects roughly how LONG that step actually takes
// relative to the others — the fill's width jumps to a specific known
// percentage after each step resolves, rather than animating smoothly and
// continuously toward a guessed endpoint. This is the core distinction from
// a fake/decorative loading animation: every fill-width change corresponds
// to a real, discrete unit of work having just genuinely completed.
const STEPS = [
  { label: 'Gathering data…', weight: 30, delay: 700 },
  { label: 'Running calculations…', weight: 45, delay: 1000 },
  { label: 'Formatting report…', weight: 25, delay: 500 },
];

function simulateStep(step) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // A small chance of failure on the calculation step specifically, to
      // demonstrate the button's error path without every click succeeding.
      if (step.label.includes('calculations') && Math.random() < 0.25) {
        reject(new Error('Calculation failed'));
      } else {
        resolve();
      }
    }, step.delay);
  });
}

async function runProcess() {
  btn.disabled = true;
  btn.classList.remove('success', 'error');
  bg.style.width = '0%';

  let cumulativeWeight = 0;

  try {
    for (const step of STEPS) {
      label.textContent = step.label;
      await simulateStep(step);
      // The width jumps to the running total of completed steps' weights —
      // a real, verifiable measure of "how much of the actual work is done,"
      // not a time-based animation that has no relationship to genuine progress.
      cumulativeWeight += step.weight;
      bg.style.width = cumulativeWeight + '%';
    }

    label.textContent = 'Report ready ✓';
    btn.classList.add('success');
    setTimeout(resetButton, 1800);
  } catch (err) {
    label.textContent = 'Failed — click to retry';
    btn.classList.add('error');
    btn.disabled = false;
    // On failure, the fill deliberately stays at wherever it actually
    // stopped (the width set by the last successfully completed step),
    // not reset to 0 or jumped to 100 — an honest reflection of exactly
    // how far real progress got before the failure occurred.
  }
}

function resetButton() {
  btn.classList.remove('success', 'error');
  bg.style.width = '0%';
  label.textContent = 'Generate report';
  btn.disabled = false;
}

btn.addEventListener('click', runProcess);