Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to link a progress bar to a download?

Status
Not open for further replies.

leifoet

Technical User
Jan 31, 2016
203
BE
The progress bar example code below starts with the push of a button.
Is it possible to have the bar start automatically when downloading a program (like XYZ.asp or ABC.pdf or ...)?
Thanks for tips.

Code:
<!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>
 
Are there other / better solutions to enter a progress bar? I would like to know a possible workable way to make this.
Thanks for tips.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top