SitesMasstec
Technical User
Hello colleagues!
I have a site which offers a 15Mb file for download, and it works well.
Now I want to display a progress bar, while the file is downloading.
I see many nice examples online, but... they do not show HOW TO CODE the progress bar to display according to the progress of download of the 15Mb file.
Please, see the code bellow (shows the progress bar at work, but I want the green bar to advance while downloading a file in my website):
I need some code to connect the progress bar to the amount of the file being downloaded.
I have a site which offers a 15Mb file for download, and it works well.
Now I want to display a progress bar, while the file is downloading.
I see many nice examples online, but... they do not show HOW TO CODE the progress bar to display according to the progress of download of the 15Mb file.
Please, see the code bellow (shows the progress bar at work, but I want the green bar to advance while downloading a file in my website):
Code:
<!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>
<div id="Progress_Status">
<div id="myprogressBar"></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 + '%';
}
}
}
</script>
</body>
</html>I need some code to connect the progress bar to the amount of the file being downloaded.
