HTML <progress>

2nd March 2020 | Christopher Pisani

The HTML element <progress> can be used to show progress of tasks such as downloading or form completion.

A simple download progress

<label for="download">Downloading progress:</label>
<progress id="download" value="50" max="100"></progress>

Form completion progress example

<script>   
    function myFunction(x) {
        var progress = 0;
        if ( document.getElementById('title').value !== '' ) {
            progress += 25;
        }
        if ( document.getElementById('name').value !== '' ) {
            progress += 25;
        }
        if ( document.getElementById('surname').value !== '' ) {
            progress += 25;
        }
        if ( document.getElementById('age').value !== '' ) {
            progress += 25;
        }
        document.getElementById('formProgress').value = progress;
    }
</script>

Fill in the form to see progress bar changing
<br><br>

<label for="formProgress">Progress:</label>
<progress id="formProgress" value="0" max="100"></progress>

<br><br>

<form method="POST" action="/pages/results.php">
    <input id="title" name="title" type="text" placeholder="Title" onfocusout="myFunction()" required>
    <br>
    <input id="name" name="name" type="text" placeholder="Name" onfocusout="myFunction()" required>
    <br>
    <input id="surname" name="surname" type="text" placeholder="Surname" onfocusout="myFunction()" required>
    <br>
    <input id="age" name="age" type="number" placeholder="Age" onfocusout="myFunction()" required>
    <br><br>
    <input type='submit'>
</form>

Available Attributes

Attribute	Values	Functionality
max	number	Maximum progress value
value	number	Value of progress relative to the maximum value