Add to width using setInterval

Solution 1:

You need to remove px part from width style and then cast string to number before incrementing it:

function setProgress(){
  var bar = document.getElementById('progress-bar');
  var width = 20;
  bar.style.width = Number(bar.style.width.replace('px', '')) + width + 'px';

  //console.log(bar.style.width);
}

Solution 2:

Make width a global var, like shown below:

var width = 0;
function setProgress(){
     var bar = document.getElementById('progress-bar');
     width+= 20;
     bar.style.width += width + 'px';
     //console.log(bar.style.width);
}
window.onload = function(){setInterval(setProgress, 10);}

Also, you should specify the max width to prevent the progress bar moving outside the working area (for example, modifying the increment line: if(width<500) {width+= 20;} else {return;}).

Alternatively, you can use your original solution by adding couple more statements, namely: removing the "px" unit from style property bar.style.width, then parsing it (converting to Number), then incrementing it and then adding "px" (otherwise, "+" operator will cause a concatenation of strings with output like: 20px20px, 20px20px20px, etc). Such alternative solution will slow down the process and put additional load on CPU (thus, it's not recommended).

Hope this may help. Best regards,