<!--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;}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.