Me gustaría mostrar una barra de progreso mientras ejecuto el siguiente código. Lo estoy llamando un guión. Necesito una barra de progreso en un bucle for en 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>
Si desea que la barra de progreso se ejecute infinitamente, vea este código a continuación
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>