How to Build a Progress Bar in an Interview

How to Build a Progress Bar in an Interview

The progress bar is a common machine coding question. Here is how to build it with animation in 90 minutes.

Requirements

• A bar that fills based on a percentage (0-100).
• Smooth animation when the value changes.
• Percentage display.
• Customizable color.
• Buttons to increase/decrease the progress.

Plan (5 minutes)

1. HTML: a container div, an inner fill div, a percentage span, control buttons.
2. State: current progress (0-100).
3. Events: increase, decrease, reset.
4. CSS: transition for smooth animation.

Build Core (40 minutes)

HTML

<div class="progress-container">
  <div class="progress-bar" id="progressBar"></div>
</div>
<span id="progressText">0%</span>
<div class="controls">
  <button onclick="changeProgress(-10)">-10%</button>
  <button onclick="changeProgress(10)">+10%</button>
  <button onclick="resetProgress()">Reset</button>
</div>

JavaScript

let progress = 0;
const bar = document.getElementById("progressBar");
const text = document.getElementById("progressText");

function updateProgress() {
  progress = Math.max(0, Math.min(100, progress));
  bar.style.width = progress + "%";
  text.textContent = progress + "%";
}

function changeProgress(delta) {
  progress += delta;
  updateProgress();
}

function resetProgress() {
  progress = 0;
  updateProgress();
}

CSS

.progress-container {
  width: 100%; max-width: 500px; height: 30px;
  background: #e0e0e0; border-radius: 15px; overflow: hidden;
}
.progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #007bff, #00d4ff);
  border-radius: 15px;
  transition: width 0.3s ease;
}
``
### Edge Cases (20 minutes)

- Progress below 0 (clamp to 0).
- Progress above 100 (clamp to 100).
- Smooth animation (CSS transition).
- Auto-increment mode (setInterval).
- Different colors for different ranges (0-30% red, 30-70% yellow, 70-100% green).

### Auto-Increment Mode

```js
function autoIncrement() {
  const interval = setInterval(() => {
    progress += 1;
    updateProgress();
    if (progress >= 100) clearInterval(interval);
  }, 100);
}
``
### The Takeaway

Build the progress bar: HTML (container + fill + text + buttons), JavaScript (update width, clamp 0-100), CSS (transition for smooth animation, border-radius, gradient). Handle edge cases (clamp, auto-increment, color ranges). The CSS transition is key for the smooth animation.