JavaScript Progress Bar in Loop [duplicate]

Question

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>

Answer 1

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>