[WhatIsJavaScript]

Хочу нарисовать прогресс бар, ширина которого с течением времени постепенно увеличивается.

<div id="progressBar" class="progress-bar"></div>

CSS:

.progress-bar {
  width: 0;
  height: 20px;
  background: red;
}

Пример я упростил. В оригинале значение step юзер может изменять и в зависимости от этого прогресс бар будет "наполняться" быстрее или медленнее. Сейчас споткнулся на том, что значение ширины прогресс бара увеличивается только один раз (первый), а дальше - не хочет. Почему?.

var valueX = 1000; // некое абстрактное пороговое значение
var valueCurrent = 0;
var progressBar = document.getElementById("progressBar");

// через определенные промежутки времени увеличиваем ширину
setInterval(function() {
  if (valueCurrent <= valueX) {
    var step = 20;
    var per = step / valueX;
    valueCurrent += step;
    progressBar.style.width += per * 100 + '%';
    // в консоли выводится 2%
    console.log(progressBar.style.width);
  }
}, 3000);

https://jsfiddle.net/wpx1xy62/6/