Question

0

129

Views

JavaScript Progress Bar in Loop

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>

5 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T02:38:50.479Z

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>