Building a Progress Bar Component: A Complete Guide

Building a Progress Bar Component: A Complete Guide

A progress bar shows the completion status of a task. Here is the complete guide to building one.

Types of Progress Bars

1. Linear: a horizontal bar that fills from left to right.
2. Circular: a ring that fills in a circle.
3. Stepped: discrete steps with labels.
4. Striped: animated stripes for indeterminate progress.

Linear Progress Bar

<div class="progress-container">
  <div class="progress-bar" id="bar"></div>
</div>
<span id="text">0%</span>

function setProgress(percent) {
  percent = Math.max(0, Math.min(100, percent));
  document.getElementById("bar").style.width = percent + "%";
  document.getElementById("text").textContent = percent + "%";
}
``
```css
.progress-container { width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; }
.progress-bar { height: 100%; background: #007bff; border-radius: 10px; transition: width 0.3s ease; }
``
### Circular Progress Bar (SVG)

```html
<svg width="120" height="120">
  <circle cx="60" cy="60" r="50" stroke="#e0e0e0" stroke-width="10" fill="none" />
  <circle cx="60" cy="60" r="50" stroke="#007bff" stroke-width="10" fill="none"
    stroke-dasharray="314" stroke-dashoffset="314" id="circle" transform="rotate(-90 60 60)" />
</svg>

function setCircular(percent) {
  const circumference = 2 * Math.PI * 50; // 314
  const offset = circumference - (percent / 100) * circumference;
  document.getElementById("circle").style.strokeDashoffset = offset;
}

Auto-Increment

function autoIncrement() {
  let progress = 0;
  const interval = setInterval(() => {
    progress += 1;
    setProgress(progress);
    if (progress >= 100) clearInterval(interval);
  }, 100);
}

Color-Based on Progress

function getColor(percent) {
  if (percent < 30) return "#ff4444"; // red
  if (percent < 70) return "#ffaa00"; // yellow
  return "#44aa44"; // green
}
bar.style.background = getColor(percent);

The Takeaway

Progress bar types: linear (width %), circular (SVG stroke-dashoffset), stepped (discrete steps), striped (animated). Use CSS transition for smooth animation. Clamp to 0-100. Color based on progress. Auto-increment with setInterval. The linear bar is the most common interview question.