Learn how to create a progress bar using JavaScript

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 description


Related Post(s)

» Here are some games made with javascript

» Learn how to Switch Between Dark and Light Mode With CSS and Javascript

» How to recreate Facebook's console warning

» A JavaScript library for formatting and manipulating numbers - Numeral.js

» How to Animate Font Awesome Icons With Javascript

collections_bookmark Category :: Javascript
date_range Published :: 2 years ago At: 07:44 PM
event_note Detailed Date :: May 04th, 2019
person Writer :: Code
  • RECENT POSTS
4 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.


5 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.


5 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.


5 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.


6 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.


7 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?


9 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).


1 year ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.


Subscribe
  • ADVERTISEMENT

YOU MAY LIKE THESE POSTS

share