function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var counter = 1;
  var id = setInterval(frame, 1000);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 1; 
      elem.innerHTML = counter++;
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 0px;
  height: 10px;
  background-color: #4CAF50;
}

<script src=".1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">0</div>
</div>
<br>
<button onclick="move()">Click Me</button>

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var counter = 1;
  var id = setInterval(frame, 1000);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 1; 
      elem.innerHTML = counter++;
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 0px;
  height: 10px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">0</div>
</div>
<br>
<button onclick="move()">Click Me</button>

In the above snippet there is progressive bar which will fill automatically when the button is clicked and it will fill the bar by adding the style.width by 1. I want that progressive bar to fill smoothly but the milliseconds shall remain unchanged i.e 1000 .

• javascript
• html
• css

• What do you mean by smoothly?using transition? – brk Commented Aug 19, 2018 at 16:10

5 Answers 5

How about tweaking the JavaScript code to achieve the desired result:

function move() {
  var elem = document.getElementById("myBar");
  var width = 0.5;
  // change the milliseconds to 10 or 5 to fill it relatively faster
  var id = setInterval(frame, 20);

  function frame() {
    if (width >= 120) {
      clearInterval(id);
    } else {
      width += 0.5;
      elem.style.width = width + 'px';
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

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

<br>
<button onclick="move()">Click Me</button>

You can use trasition and decrease the interval time

function move() {
  var elem = document.getElementById("myBar");   
  var width = 2;
  var id = setInterval(frame, 1);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 2; 
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
  transition: width 2s;
}

<h1>JavaScript Progress Bar</h1>

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

<br>
<button onclick="move()">Click Me</button>

Add transition:width 600ms linear; to

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
  transition:width 600ms linear;
}

This will smoothly animate the width of the bar.

Note:Keep the transition timing equal to setInterval timeout to avoid jerky animation

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var counter = 1;
  var id = setInterval(frame, 1000);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 1; 
      elem.innerHTML = counter++;
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
  transition:width 1000ms linear;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

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

<br>
<button onclick="move()">Click Me</button>

The transition in CSS makes smooth interpolation between 2 values. That means when you increment the width by 1px, the browser will increase the width by animating it, This takes place only after the javascript code to increase width is executed.

The smallest unit that you can render is a pixel.

What you can do is check for a certain inverval to increase the width. In the sample below I increase the width by 10px so that you can see the transition properly

function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;
  var counter = 0;
  var id = setInterval(frame, 600);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      counter++
      console.log(counter);
      if(counter % 5 == 0)
      {
        width += 10; 
        elem.style.width = width + 'px'; 
      }
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}
#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -ms-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;      
}

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

<br>
<button onclick="move()">Click Me</button>

Instead of using a interval of 1 second, you can use 10 milliseconds. That is the lowest amount of time between intervals that will still work properly. Then, you need to make sure to divide both the increment of width and counter by 100 and it will appear smoother than before.

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var counter = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 0.01; 
      counter += 0.01;
      elem.innerHTML = Math.round(counter);
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 0px;
  height: 10px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <h1>JavaScript Progress Bar</h1>

  <div id="myProgress">
    <div id="myBar">0</div>
  </div>
  <br>
  <button onclick="move()">Click Me</button>