I'm trying to make a js progress bar which finishes after 5 seconds and then runs some code.

What I have from w3:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

I'm trying to make a js progress bar which finishes after 5 seconds and then runs some code.

What I have from w3:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

How can I f.e. adjust its time to 5 seconds, with the animation still being smooth?

• javascript
• html
• css

Share Follow asked Jun 22, 2020 at 12:28 TomTom 4,06366 gold badges2626 silver badges6363 bronze badges 1

• 1 setInterval(..., (5 * 1000) / 100) – Andreas Commented Jun 22, 2020 at 12:33

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

The animation need not be done in javascript. Use CSS instead for smoother performance and cleaner code.

It's generally a better idea to use CSS animations over JS, especially when they are simple. You should read more here. If you still want to do it in javascript for some reason, you should use this dedicated call for animating stuff requestAnimationFrame.

function move() {
  var elem = document.getElementById("myBar");
  
  myBar.style.width = "0%";
  
  setTimeout(() => {
    myBar.style.width = "100%";
  });
  
  setTimeout(() => {
    alert("done");
    /* do stuff */
  }, 5000);
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: green;
  transition: width 5s linear; /* note this line */
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

For higher quality animations is better to use requestAnimationFrame.

let start;
let element = document.getElementById("myBar");
let count = 0;
function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;

  element.style.width = (100 / 2000) * elapsed + "%";
  
  if (elapsed < 2000) { // Stop the animation after 2 seconds
    window.requestAnimationFrame(step);
  }else {
  }
}

window.requestAnimationFrame(step);

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
  
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

According to docs setInterval delay param is in miliseconds

delayOptional The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. See Delay restrictions below for details on the permitted range of delay values.

var i = 0;
const element = document.getElementById("myBar");
let width = 1;
let chunk = 100 / 5;

function move() {
  if (i == 0) {
        
    let handle = setInterval(frame, 1000);
    
    function frame() {
      if (width >= 100) {
        clearInterval(handle);
      } else {
        width = width + chunk;
        element.style.width = `${width}%`;
      }
    }
  }
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 0%;
  transition: all .3s ease-in;
  height: 30px;
  background-color: green;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 5000/100);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

basicly time you want divided by count of how many loops it take to fill whole bar

You need to change var id = setInterval(frame, 10); 1000 = 1 second

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, (5*1000)/100);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

move();

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>