How can I make a ProgressBar with px as width?

Question

I am having a hard time thinking about the process of a Progress Bar that the px width is the current value and the max width is 100%.

My increment value should change and not fixed to 1. like for example the current width on the UI was 1000px and I want to increment until I got 1000px then I resize and the progress bar max width change to 117px. then the increment value should change to .002 something like that.

<div class="progress-line-body" style="width: 1309.8px;">
  <div class="progress-value" id="sampleid" style="width: 50px;"> 
  </div>
</div>

<script> 
   var $sample = $('#sampleid');
   var incrementVal = 1;
   var value = currentWidth //progress-line-body + incrementVal;
   $sample.css("width", increment + "px");
</script>

Answer 1

You really should use percentages to keep it responsive. a 1px incrementing will be unresponsive as hell. Also, use the HTML progressbar:

window.addEventListener('DOMContentLoaded', function() {
  let x = 0.1;
  setInterval(function() {
    document.querySelector('#progress-bar').value = (x >= 100) ? 100 : x;
    x += 0.1;
  }, 25);
})

<label for="progress-bar">Progressbar:</label>
<progress id="progress-bar" max="100" value="0"></progress>