Progress Bar Use Cases and Real-World Examples

Progress Bar Use Cases and Real-World Examples

Progress bars are used in many real-world scenarios. Here are common use cases and implementation tips.

1. File Upload

function uploadFile(file) {
  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100;
      setProgress(percent);
    }
  });
  xhr.open("POST", "/upload");
  xhr.send(file);
}

2. Form Completion

function checkFormCompletion() {
  const inputs = document.querySelectorAll("input[required]");
  const filled = Array.from(inputs).filter((i) => i.value).length;
  const percent = (filled / inputs.length) * 100;
  setProgress(percent);
}

3. Multi-Step Wizard

let currentStep = 0;
const totalSteps = 4;
function updateStepProgress() {
  setProgress((currentStep / (totalSteps - 1)) * 100);
}

4. Loading Data

async function loadData() {
  showLoading();
  const data = await fetch("/api/data");
  hideLoading();
  render(data);
}

5. Countdown Timer

function countdown(seconds) {
  let remaining = seconds;
  const interval = setInterval(() => {
    setProgress((remaining / seconds) * 100);
    remaining--;
    if (remaining < 0) clearInterval(interval);
  }, 1000);
}

6. Scroll Progress (Reading Indicator)

window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop;
  const height = document.documentElement.scrollHeight - window.innerHeight;
  const percent = (scrollTop / height) * 100;
  setProgress(percent);
});

The Takeaway

Real-world use cases: file upload (XMLHttpRequest progress event), form completion (filled inputs / total), multi-step wizard (current step / total), loading data (show/hide spinner), countdown timer (remaining / total), and scroll progress (scrollTop / scrollHeight). Each use case has a different way to calculate the percentage.