Learn how to create a progress bar using JavaScript
Make money for being or staying online/internet.

You will get a $5 starting gift when you join using this 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.


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

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

Css File(style.css).

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


	margin:0 auto;



Javascript File(progress.js).

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

//waits for the DOM to load.

//This sets a click event on the upload button.

//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%
		//increments until width reaches 100%.

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

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


To download the source code: Click here description

Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW

Related Post(s)

» How to Install Node.js® and NPM on Windows

» How to recreate Facebook's console warning

» How to create a Dynamic GO BACK button on a 404 Error Page

» How to print Webpage content using Javascript

» How to Animate Font Awesome Icons With Javascript

collections_bookmark Category :: Javascript
date_range Published :: 3 years ago At: 07:44 PM
event_note Detailed Date :: May 04th, 2019
person Writer :: Code
1 year ago

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

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

1 year 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.

1 year 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.

1 year ago


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

1 year 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.

1 year 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?

1 year 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.