<!--This is a download progress example-->
<button onClick="showProgress()">Click: Download Progress!</button>
<progress value="" id="download" max="100">Download</progress>
<!--This is another example-->
<br><br>
<p>The milestone covered so far is shown below:</p>
<progress max="90" value="45"></progress>
<p>In this example, the user will be required to enter a value which will be displayed by the progress bar.</p>
<!--This is a user input example-->
<button onClick="showMilestone()">Click to Enter Your Milestone</button>
<progress value="" id="milestone" max="100">Milestone</progress>
var progress=0;
var max=100;function showProgress(){
var downloadProgress= document.getElementById('download');
if(progress<=100){
progress+=0.5;
downloadProgress.value=progress;
}
setTimeout('showProgress()',max);}
//This is the script to make the button //work
function showMilestone(){
var myMilestone=prompt('Please, Enter a value between 1 and 100!');
document.getElementById('milestone').value=myMilestone;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.