Не увеличивается ширина блока через style.width

[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/

[Strongman]

Может вот так написать?

setInterval(function() {
  if (valueCurrent <= valueX) {
    var step = 20;
    var per = step/valueX;  
    valueCurrent += step;
    progressBar.style.width = valueCurrent;    
    //а per использовать как надпись в ProgressBar
    console.log(progressBar.style.width);
  }

[рони]

WhatIsJavaScript,
строку 13 перенесите выше и посмотрите что с чем вы складываите.
css правило и атрибут style это не одно тоже!!!
нет атрибута style в теге - нет значения style.width;
и значение это строка

alert("2%" + "2%")

progressBar.style.width = valueCurrent + '%';

[WhatIsJavaScript]

Спасибо, проблема решена.

[Strongman]

А, блин, почти угадал. Только 1 строку нужно переправить:

progressBar.style.width = valueCurrent+"px";

Может и Вы мне подскажете где можно найти расшифровки кода исходников Wolfeinstein3D?

[WhatIsJavaScript]

А, блин, почти угадал.

Именно, вся разработка на джс сводится к угадыванию

[Strongman]

Да-да-да !