Progress Bar Interview Questions

Progress Bar Interview Questions

Here are common interview questions about building progress bars.

Q1: Build a progress bar that fills from 0 to 100% with a button.

let progress = 0;
function fill() {
  const interval = setInterval(() => {
    progress += 1;
    bar.style.width = progress + "%";
    if (progress >= 100) clearInterval(interval);
  }, 50);
}

Q2: How would you animate the progress bar smoothly?

Use CSS transition: transition: width 0.3s ease. Or requestAnimationFrame for custom curves.

Q3: How would you handle a file upload progress bar?

Use XMLHttpRequest's progress event: (e.loaded / e.total) * 100. Note: fetch does not support upload progress.

Q4: Build a circular progress bar.

Use SVG with stroke-dasharray and stroke-dashoffset. Calculate offset = circumference - (percent/100 * circumference).

Q5: How would you show an indeterminate progress (unknown total)?

Use a striped or pulsing animation with CSS. No percentage, just a visual indicator that something is happening.

Q6: How would you change the color based on progress?

function getColor(p) {
  if (p < 33) return "#ff4444";
  if (p < 66) return "#ffaa00";
  return "#44aa44";
}

Q7: How would you make the progress bar accessible?

Add role="progressbar", aria-valuenow, aria-valuemin="0", aria-valuemax="100". Announce changes with aria-live for screen readers.

Q8: How would you handle progress above 100% or below 0%?

Clamp: percent = Math.max(0, Math.min(100, percent)).

The Takeaway

Progress bar interview questions: fill with button (setInterval), smooth animation (CSS transition), file upload (XHR progress), circular (SVG), indeterminate (striped animation), color based on progress, accessibility (ARIA), and clamping 0-100.