Progress Bar Types: Linear, Circular, and Stepped

Progress Bar Types: Linear, Circular, and Stepped

Here are three types of progress bars and how to build each one.

1. Linear Progress Bar

<div class="progress-container">
  <div class="progress-bar" id="linearBar"></div>
</div>

function setLinear(percent) {
  document.getElementById("linearBar").style.width = percent + "%";
}

.progress-container { width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; }
.progress-bar { height: 100%; background: #007bff; transition: width 0.3s ease; }

2. Circular Progress Bar

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50" stroke="#e0e0e0" stroke-width="8" fill="none" />
  <circle cx="60" cy="60" r="50" stroke="#007bff" stroke-width="8" fill="none"
    stroke-linecap="round" stroke-dasharray="314.16" stroke-dashoffset="314.16"
    id="circleBar" transform="rotate(-90 60 60)" />
</svg>
<span id="circleText">0%</span>

function setCircular(percent) {
  const circumference = 2 * Math.PI * 50;
  const offset = circumference - (percent / 100) * circumference;
  document.getElementById("circleBar").style.strokeDashoffset = offset;
  document.getElementById("circleText").textContent = percent + "%";
}

3. Stepped Progress Bar

<div class="steps">
  <div class="step active">1. Personal</div>
  <div class="step">2. Address</div>
  <div class="step">3. Payment</div>
  <div class="step">4. Done</div>
</div>

function setStep(currentStep) {
  document.querySelectorAll(".step").forEach((step, index) => {
    step.classList.toggle("active", index <= currentStep);
  });
}

.steps { display: flex; gap: 4px; }
.step { flex: 1; padding: 8px; text-align: center; background: #e0e0e0; color: #666; }
.step.active { background: #007bff; color: white; }

When to Use Each

• Linear: file upload, download progress, task completion.
• Circular: loading states, countdown timers, dashboards.
• Stepped: multi-step forms, checkout, onboarding.

The Takeaway

Three types: linear (width %, CSS transition), circular (SVG, stroke-dashoffset), and stepped (discrete steps with active class). Use linear for file uploads, circular for loading states, and stepped for multi-step forms. Each has a different use case.