Tab Form Progress Indicator Implementation

Tab Form Progress Indicator Implementation

A progress indicator shows users how far they are in the form. Here is how to implement it.

Linear Progress

function updateProgress() {
  const percent = ((currentStep + 1) / steps.length) * 100;
  document.getElementById("progressFill").style.width = percent + "%";
}

<div class="progress-container">
  <div class="progress-fill" id="progressFill"></div>
</div>

Stepped Progress

<div class="step-indicator">
  <div class="step-dot completed">1</div>
  <div class="step-line completed"></div>
  <div class="step-dot active">2</div>
  <div class="step-line"></div>
  <div class="step-dot">3</div>
</div>

function updateStepIndicator() {
  document.querySelectorAll(".step-dot").forEach((dot, i) => {
    dot.classList.remove("active", "completed");
    if (i < currentStep) dot.classList.add("completed");
    if (i === currentStep) dot.classList.add("active");
  });
  document.querySelectorAll(".step-line").forEach((line, i) => {
    line.classList.toggle("completed", i < currentStep);
  });
}

CSS

.step-indicator { display: flex; align-items: center; gap: 0; }
.step-dot { width: 30px; height: 30px; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.step-dot.active { background: #007bff; color: white; }
.step-dot.completed { background: #44aa44; color: white; }
.step-line { flex: 1; height: 2px; background: #e0e0e0; min-width: 40px; }
.step-line.completed { background: #44aa44; }

The Takeaway

Progress indicator: linear (percentage bar, ((currentStep + 1) / steps.length) * 100) or stepped (dots with completed/active states and connecting lines). Update on every step change. Completed steps are green, active is blue, future steps are gray. This gives users a clear sense of progress.