I would like to show a progress bar while running the following code. I'm calling it a script. I need a progress bar in a for loop in javascript.
<div id="myProgress">
<div id="myBar"></div>
</div>
<script>
var i = 0;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 500);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
</script>
If you want progress bar infinite execute, see this below code
var i = 0
var elem = document.getElementById("myBar")
let width = 1
var id = setInterval(frame, 50)
function frame() {
if (width >= 100) {
clearInterval(id)
i = 0
width = 0
setInterval(frame, 50)
} else {
width++
elem.style.width = width + "%"
}
}body {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#myProgress {
border: 1px solid black;
width: 20rem;
}
#myBar {
border: 1px solid black;
background-color: black;
} <div id="myProgress">
<div id="myBar"></div>
</div>