HTML <progress> tag
HTML <progress> tag : Definition
• The HTML <progress> element represents that how much of the task that has been completed of the ongoing assigned task.
• This <progress> element uses two attributes max and value and these attributes are used to define how much progress(value) has been done and left to be completed(max).
Html <progress> tag example 1:
<!DOCTYPE html> <html> <body> <label for="file">File Downloaded: </label> <progress id="file" value="65" max="100" title="65%"> 65% </progress> </body> </html>
Output :
Html <progress> tag example 2:
<!DOCTYPE html> <html lang="en"> <head> <title>HTML progress tag example</title> </head> <body> <h2>File Download Progress</h2> <p>Downloaded: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p> <script type="text/javascript"> var i = 0; var progressBar = document.getElementById("bar"); function countNumbers(){ if(i < 100){ i = i + 1; progressBar.value = i; // For browsers that don't support progress tag progressBar.getElementsByTagName("span")[0].textContent = i; } // Wait for sometime before running this script again setTimeout("countNumbers()", 500); } countNumbers(); </script> </body> </html>
Output :
File Download Progress
Downloaded: