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

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

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

CSS:
Пример я упростил. В оригинале значение 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/

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

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 + '%';

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

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

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

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

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

Да-да-да:lol: !