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.
<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.
.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).
//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
Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW
Related Post(s)
» Adding JavaScript to OPEN and CLOSE the Overlay Effect
» How to create a Digital Clock using JavaScript
» JavaScript Quiz App Source Code
» How to recreate Facebook's console warning
» Learn how to Switch Between Dark and Light Mode With CSS and Javascript
collections_bookmark Category :: Javascriptdate_range Published :: 5 years ago At: 07:44 PM
event_note Detailed Date :: May 04th, 2019
person Writer :: Code