Author Photo
Christopher Unum I am a software Developer, I write web development tutorials, I also mentor aspiring web developers. s

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.


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


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>


Now we style the HTML as shown below

  margin:10px auto;
  text align:center;
  margin:0 auto;


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
}, 1000);


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