Learn how to create a progress bar using JavaScript

Make money for being or staying online/internet.

You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!

In this simple article i will teach you how to create a progress bar using JavaScript.

What is a progress bar?

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. - Wikipedia

So if you have content that will take a long time to load, you should give the user feedback.

Watch the tutorial

The file structure is as follow;

index.html
style.css
progress.js

Files Explained

Html File(index.html).

This file describes the structure of Web pages using markup.

copy


<div class="container">
	
	<div id="progress">
		<div id="innerBar"></div>
	</div>

	<br>
	<div id="status"></div>
	<br>
	
	<button id="upload">Upload</button>
</div>

Css File(style.css).

The Css describes how HTML elements should be displayed/organized.

copy


.container{
	margin:0 auto;
	width:70%;
}

#progress{
	width:100%;
	background-color:#ddd;
}

#innerBar{
	width:2%;
	height:40px;
	background-color:darkred;
}

Javascript File(progress.js).

Through javascript we make the Progress Bar dynamic(animated).

copy

//waits for the DOM to load.
document.addEventListener("DOMContentLoaded",function(){

//This sets a click event on the upload button.
document.getElementById('upload').addEventListener('click',MoveBar);

//Runs when the upload button is clicked.
function MoveBar(){
	let innerBar = document.getElementById('innerBar');
	let status = document.getElementById('status');
	let width = 1;
	let id = setInterval(TimeFrame,30);
	
	//This runs & stops the innerBar from running when it reaches 100%
function TimeFrame(){
	if(width >=100){
		//stops the innerBar from expanding when it reaches 100%
		clearInterval(id);
	}else{
		//increments until width reaches 100%.
		width++;

		//changes the innerBar width.
		innerBar.style.width = width + '%';

		//Displays the status progress
		status.innerHTML = width + '%';
	}
}
}

});

To download the source code: Click here