CodePen Embed - progress-bar-simple-transition

<div class="progressbar">
  <div class="progress-fill" id="fill">
  </div>
</div>

.progressbar {
  height: 8px;
  width: 300px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 8px;
  background-color: #007bff;
  border-radius: 4px;
  transition: transform 500ms linear;
}

const fillElem = document.getElementById("fill");

let value = 0;
const updateProgress = () => {
  value = (value + 10) % 110;
  fillElem.style = `transform: translateX(${value - 100}%)`
}

setInterval(updateProgress, 500)

This Pen is owned by Amal Jossy on CodePen.

See more by @amaljossy on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.