<progress>, <meter>

Syntax

<progress value="70" max="100"></progress>
<meter value="6" min="0" max="10"></meter>

Examples

<label for="upload">Uploading file...</label>
<progress id="upload" value="45" max="100"></progress>

<p>Processing your request...</p>
<progress></progress>

<label for="disk">Disk usage:</label>
<meter id="disk" value="7.2" min="0" max="10" low="3" high="8" optimum="0">7.2 out of 10 GB</meter>

Attributes

• value (number): The current value
• max (number): The maximum value (progress and meter)
• min (number): The minimum value (meter only, defaults to 0)
• low (number): The upper bound of the low range (meter only)
• high (number): The lower bound of the high range (meter only)

Best practices

• Use <progress> for tasks that are actively completing, like uploads or multi-step processes
• Use <meter> for static measurements within a known range, like ratings, disk usage, or scores — not for task completion
• Omit the value attribute on <progress> to show an indeterminate loading state
• Always pair with a <label> so the purpose of the bar or gauge is clear

At a glance

Purpose

Structure and meaning for web content

File extension

.html · .htm

Runs in

Web browsers

Usually used with

CSS and JavaScript

Specifications & further reading

• HTML Living Standard

Related HTML documentation