Gwecode.
Feedback & overlays

Animated Progress Bar

A labeled progress bar whose fill width can be increased step by step with a button to simulate task completion.

live preview 
<div class="progbar-wrap">
  <div class="progbar-top">
    <span class="progbar-title">Lesson progress</span>
    <span class="progbar-percent">20%</span>
  </div>
  <div class="progbar-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20">
    <div class="progbar-fill" style="width: 20%;"></div>
  </div>
  <button class="progbar-btn">Complete Next Step</button>
</div>
.progbar-wrap {
  box-sizing: border-box;
  width: 280px;
  font-family: system-ui, -apple-system, sans-serif;
}
.progbar-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.progbar-track {
  width: 100%;
  height: 10px;
  background-color: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.progbar-fill {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.progbar-btn {
  margin-top: 16px;
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.progbar-btn:hover {
  background-color: #2f6fe0;
}
.progbar-btn:disabled {
  background-color: #9ca3af;
  cursor: default;
}
var progbarValue = 20;
var progbarFill = document.querySelector('.progbar-fill');
var progbarPercent = document.querySelector('.progbar-percent');
var progbarTrack = document.querySelector('.progbar-track');
var progbarBtn = document.querySelector('.progbar-btn');
progbarBtn.addEventListener('click', function () {
  progbarValue = Math.min(100, progbarValue + 20);
  progbarFill.style.width = progbarValue + '%';
  progbarPercent.textContent = progbarValue + '%';
  progbarTrack.setAttribute('aria-valuenow', String(progbarValue));
  if (progbarValue >= 100) {
    progbarBtn.disabled = true;
    progbarBtn.textContent = 'Completed';
  }
});