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 style="width: 1309.8px;">
<div 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>
CodePudding user response:
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>