13/09/2020    By: christoper unum
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></div></div>
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;}
Below is the JavaScript code for the Progress Bar.
//initializes the counterlet x = 0;//repeats action every secondlet interval = setInterval(() => {//changes the percentage value every seconddocument.querySelector("#percentage").textContent = x + "%";//increases the width of the bar every seconddocument.querySelector("#progress-in").style.width = x + "%";//stops the intervalif (x == 100) clearInterval(interval);//counts to hundredx++;}, 1000);
Thats all for the progress bar tutorial, in the next tutorial, we will be creating a circular progress bar.
![]() |
how to add on scroll animations to your website using animate.css and wow.js By christoper unum |
![]() |
how to create a login form using html, css, javascript, php and ajax By christoper unum |
![]() |
how to create a registration page using ajax and php By christoper unum |
Copyright © 2022 Naishare Technology - All rights reserved