Animate css progress bar without jumping between updates?

Question

I'm using this on my site …

<progress id='video-progress' min='0' max='100' value=''></progress>

This is the entire styling of the element …

#video-progress {
    -webkit-appearance: none;
    border: none;
    position:fixed;
    bottom:0;
    left:0;
    height:3px;
    width:100%;
    z-index:1;
}

So all it does is move from 0 to 100% screen width on the bottom of the page. The progress bar is updated via Javascript.

However since my video is only 30 seconds long, the single steps of updates are executed as "jumps" for the progress bar. So there is no smooth motion of the bar.

Any idea how I could animate the progress bar or smooth it between the updated steps?

UPDATE:

JavaScript … 

function updateProgressBar() {
    var progressBar = document.getElementById('video-progress');
    var percentage = Math.floor((100 / fmVideo.duration) * fmVideo.currentTime);
    progressBar.value = percentage;
}

Answer 1

You could animate it by incrementing its value every 15 millisecond using setInterval and stop incrementing if the value is greater than percentage using clearInterval.

This code extracts the current value and increments it until it reaches the percentage value.

Note: percentage is manually set to 70.

var progressBar = document.getElementById('video-progress');

function updateProgressBar() {
  var percentage = 70;
  var curr = progressBar.value;
  var update = setInterval(function() {
    if (curr > percentage) {
      clearInterval(update);
    }
    progressBar.value = curr++;
  }, 15)
}

updateProgressBar();

#video-progress {
  -webkit-appearance: none;
  border: none;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 1;
}

<progress id='video-progress' min='0' max='100' value=''></progress>