HTML Progress Element

This <progress> element shows the progress of a task completion. The work expresses the ratio of how much has been done and how much remains.

Two attributes are used in this element. These attributes are the max attribute and the value attribute. The max attribute indicates the total extent of work required to complete a task. The value attribute indicates how much of the task has been completed.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label for="file">Loading... 75%</label><br>
        <progress id="file" max="100" value="75"></progress>
    </form>
</body>
</html>

Try it Yourself