Edit in JSFiddle

<div id="progress-wrapper">
  <button id="progress-bar-trigger">Run</button>
  <div id="progress-bar" style="background-color: blue; width: 0%;">&nbsp;</div>
  <div id="progress-bar-message">Waiting for progress to start...</div>
</div>
function updateProgress(progressBarElement, progressBarMessageElement, progress) {
  progressBarElement.style.width = progress.percent + "%";
  progressBarMessageElement.innerHTML = progress.current + ' of ' + progress.total + ' processed.';
}

var trigger = document.getElementById('progress-bar-trigger');
trigger.addEventListener('click', function(e) {
  var bar = document.getElementById("progress-bar");
  var barMessage = document.getElementById("progress-bar-message");
  for (var i = 0; i < 11; i++) {
    setTimeout(updateProgress, 500 * i, bar, barMessage, {
      percent: 10 * i,
      current: 10 * i,
      total: 100
    })
  }
})
#progress-bar {
  margin-top: 1em;
}