Progress Bar with Milestone Labels — Position-Aware Loading Bar in HTML CSS JS

<div class="mp-card">
  <div class="mp-track" id="mpTrack">
    <div class="mp-fill" id="mpFill"></div>
    <div class="mp-milestones" id="mpMilestones"></div>
  </div>
  <div class="mp-labels" id="mpLabels"></div>
  <button type="button" class="mp-btn" id="mpBtn">Run upload</button>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.mp-card{width:100%;max-width:420px;background:#151f34;border:1px solid #223055;border-radius:16px;padding:24px}

.mp-track{position:relative;height:8px;background:#1e293b;border-radius:6px;margin:0 6px}
.mp-fill{position:absolute;top:0;left:0;bottom:0;width:0%;background:linear-gradient(90deg,#6366f1,#22d3ee);border-radius:6px;transition:width .5s cubic-bezier(.22,1,.36,1)}

.mp-milestones{position:absolute;inset:0}
.mp-tick{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#1e293b;border:2px solid #334155;transition:background .3s,border-color .3s,transform .3s}
.mp-tick.mp-hit{background:#6366f1;border-color:#a5b4fc;transform:scale(1.15)}

.mp-labels{position:relative;height:34px;margin:10px 6px 0}
.mp-tag{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:#5b6484;white-space:nowrap;transition:color .3s}
.mp-tag.mp-hit{color:#818cf8}
.mp-tag.mp-current{color:#fff}

.mp-btn{margin-top:18px;width:100%;background:#6366f1;color:#fff;border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.mp-btn:hover{background:#4f46e5}
.mp-btn:disabled{opacity:.5;cursor:not-allowed}

var MILESTONES = [
  { pct: 0, label: 'Uploading' },
  { pct: 35, label: 'Processing' },
  { pct: 70, label: 'Optimizing' },
  { pct: 100, label: 'Done' },
];

var fill = document.getElementById('mpFill');
var ticksWrap = document.getElementById('mpMilestones');
var labelsWrap = document.getElementById('mpLabels');
var btn = document.getElementById('mpBtn');

MILESTONES.forEach(function (m) {
  var tick = document.createElement('div');
  tick.className = 'mp-tick';
  tick.style.left = m.pct + '%';
  tick.dataset.pct = m.pct;
  ticksWrap.appendChild(tick);

  var tag = document.createElement('div');
  tag.className = 'mp-tag';
  tag.style.left = m.pct + '%';
  tag.textContent = m.label;
  tag.dataset.pct = m.pct;
  labelsWrap.appendChild(tag);
});

var ticks = ticksWrap.querySelectorAll('.mp-tick');
var tags = labelsWrap.querySelectorAll('.mp-tag');

// The only thing that determines a milestone's visual state is a real
// comparison between the current progress value and that milestone's own
// position — not a fixed timer per milestone.
function applyProgress(progress) {
  fill.style.width = progress + '%';

  ticks.forEach(function (tick) {
    var pct = Number(tick.dataset.pct);
    tick.classList.toggle('mp-hit', progress >= pct);
  });

  tags.forEach(function (tag) {
    var pct = Number(tag.dataset.pct);
    tag.classList.toggle('mp-hit', progress >= pct);
  });

  // "Current" milestone: the highest one whose position is <= progress,
  // as long as we haven't fully reached the next one yet.
  var current = null;
  MILESTONES.forEach(function (m) {
    if (progress >= m.pct) current = m.pct;
  });
  tags.forEach(function (tag) {
    tag.classList.toggle('mp-current', Number(tag.dataset.pct) === current && progress < 100);
  });
}

function runUpload() {
  btn.disabled = true;
  var progress = 0;
  applyProgress(0);

  var timer = setInterval(function () {
    progress += 2 + Math.random() * 5;
    if (progress >= 100) {
      progress = 100;
      clearInterval(timer);
      btn.disabled = false;
    }
    applyProgress(progress);
  }, 180);
}

btn.addEventListener('click', runUpload);
applyProgress(0);