HTML Progress Tag

HTML <progress> tag is used to display the progress bar on the website. It is HTML5 tag. It is used to represent the progress of a task. It is also used to define how much work is done and how much is left to download a thing.

It is not used to represent the disk space or relevant query. It is not used for gauging purposes.

Contents hide
Attributes of HTML Progress Tag
Example

Attributes of HTML Progress Tag

TagDescription
valueSpecifies how much of the task has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. 
maxIt defines that how much work the task requires in total. Default value is 1
Attributes of HTML Progress Tag

If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Progress Tag</title>
</head>

<body>
    <h1>The progress element</h1>

    <label for="file">Downloading progress:</label>
    <progress id="file" value="32" max="100"> 32% </progress>
    <br>
    Indeterminate progress: <progress></progress>

</body>

</html>
HTML Progress Tag Example – Output