如何制作以 px 为宽度的 ProgressBar？

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>

Answer 2

I think you would be better off using percentages also for the progress value.

I have created an example for you. You could easily adapt it if you really want to use pixels instead of percentages

 const progressValueEl = document.querySelector(".progress-value"); const startingPercentage = 0; const maxPercentage = 100; let currentPercentage = startingPercentage; const updateValueBar = () => { progressValueEl.style.width = `${currentPercentage}%`; } setInterval(() => { if (currentPercentage < maxPercentage) { currentPercentage++; updateValueBar(); } }, 100);

 .progress-line-body { height: 20px; width: 400px; background-color: lightgreen; position: relative; }.progress-value { position: absolute; top: 0; left: 0; height: 100%; background-color: purple; }

 <div class="progress-line-body"> <div class="progress-value"></div> </div>