how to create a simple progress bar using html, css and javascript

Using progress bars on your website can let your web users know how long a particular task can be completed. In this tutorial, we will be creating a simple progress bar using HTML, CSS, and JavaScript.

We will be using the setInterval function to simulate data transfer. In real cases, the status of data transfer can be obtained from web servers.

Prerequisite

Basic knowledge of HTML, CSS, and JavaScript is required to fully understand the concepts in this tutorial.

HTML

Below is the HTML code for the progress bar.

<div id="progress-container">
  <center><b id="percentage">0%</b></center>
  <div id="progress-out">
    <div id="progress-in"></div>
  </div>
</div>

CSS

Now we style the HTML as shown below

#progress-container{
  width:95%;
  margin:10px auto;
  text align:center;
}
#progress-out{
  max-width:300px;
  margin:0 auto;
  background:#C8C8C8;
  height:20px;
  border-radius: 5px;
}
#progress-in{
  border-radius:5px;
  width:0px;
  height:20px;
  background:#1E8CC3;
}
#percentage{
  color:#1E8CC3;
}

JavaScript

Below is the JavaScript code for the Progress Bar.

//initializes the counter
let x = 0;
//repeats action every second
let interval = setInterval(() => {
  //changes the percentage value every second
  document.querySelector("#percentage").textContent = x + "%";
  //increases the width of the bar every second
  document.querySelector("#progress-in").style.width = x + "%";
  //stops the interval
  if (x == 100) clearInterval(interval);
  //counts to hundred
  x++;
}, 1000);

Conclusion

Thats all for the progress bar tutorial, in the next tutorial, we will be creating a circular progress bar.