A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words we can say that, Progress Bars can be used to depict the status of anything that is in progress.
To create a basic Progress Bar using JavaScript, the following steps needs to be carried out:
-
Create HTML structure for your progress bar:
The code below contains two “div” tag elements named “Progress_Status” and “myprogressbar”.HTML
<divid="Progress_Status"><divid="myprogressBar"></div></div> -
Adding CSS:
The code below is used to set the width and the background color of the progress bar as well as the progress status in the bar.CSS
#Progress_Status {width: 50%;background-color: #ddd;}#myprogressBar {width: 1%;height: 35px;background-color: #4CAF50;text-align: center;line-height: 32px;color: black;} -
Adding JavaScript:
The code below creates a dynamic progress bar(animated) using javascript functions “update” and “scene”.JavaScript
<script>functionupdate() {varelement = document.getElementById("myprogressBar");varwidth = 1;varidentity = setInterval(scene, 10);functionscene() {if(width >= 100) {clearInterval(identity);}else{width++;element.style.width = width +'%';}}}</script> -
Link the HTML,CSS and JavaScript elements
Below program shows the complete code of progress bar linking the above HTML, CSS and JavaScript Codes:HTML
<!DOCTYPE html><html><style>#Progress_Status {width: 50%;background-color: #ddd;}#myprogressBar {width: 2%;height: 20px;background-color: #4CAF50;}</style><body><h3>Example of Progress Bar Using JavaScript</h3><p>Download Status of a File:</p><divid="Progress_Status"><divid="myprogressBar"></div></div><br><buttononclick="update()">Start Download</button><script>function update() {var element = document.getElementById("myprogressBar");var width = 1;var identity = setInterval(scene, 10);function scene() {if (width >= 100) {clearInterval(identity);} else {width++;element.style.width = width + '%';}}}</script></body></html>
Output :
On clicking the “start download” button,the progress animation in the progress bar can be seen.
Creating A Progress Bar with Label
To add a numeric label to indicate how far the user is in the process, an addition of a new element inside or outside the progress bar is required which will display the progress status.
To add a label, make the following changes in the above code in “myprogressbar” element.
CSS
#myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; } |
Make the following changes in the Function “update” and “scene” to make the numeric label update along with the progress in the progress bar.
JavaScript
<script> function update() { var element = document.getElementById("myprogressBar"); var width = 1; var identity = setInterval(scene, 10); function scene() { if (width >= 100) { clearInterval(identity); } else { width++; element.style.width = width + '%'; element.innerHTML = width * 1 + '%'; } } } </script> |
Below is the complete program using HTML , CSS and JavaScript to create a Progress Bar with Label:
HTML
<!DOCTYPE html> <html> <style> #Progress_Status { width: 50%; background-color: #ddd; } #myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; } </style> <body> <h3>Example of Progress Bar Using JavaScript</h3> <p>Download Status of a File:</p> <div id="Progress_Status"> <div id="myprogressBar">1%</div> </div> <br> <button onclick="update()">Start Download</button> <script> function update() { var element = document.getElementById("myprogressBar"); var width = 1; var identity = setInterval(scene, 10); function scene() { if (width >= 100) { clearInterval(identity); } else { width++; element.style.width = width + '%'; element.innerHTML = width * 1 + '%'; } } } </script> </body> </html> |
Output :
