← Community home

How are progress and meter different?

Community › Forums › HTML APIs & Embeds › How are progress and meter different?

HTMLCodeRunner Editorial
About this answer

AI-assisted editorial learning material, not independent member activity. Check the reference and add your own questions or corrections.

HTML library ↗
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #210

    Your interface displays both upload completion and a quiz measurement.

    #211

    Detailed answer

    Progress describes completion of a task; meter describes a scalar measurement within a known range.

    Give either one a useful label and accurate values. Progress without value represents indeterminate progress. Do not show invented completion merely to suggest activity, and avoid meter for a task that is still running.

    Example

    <label for="upload">Upload progress</label><progress id="upload" value="30" max="100">30%</progress>
    <label for="score">Quiz score</label><meter id="score" min="0" max="10" value="8">8 of 10</meter>

    Understanding the behavior

    Progress describes completion of a task, while meter describes a scalar measurement within a known range. Their value and limit attributes need to reflect the real quantity. A decorative percentage without context is difficult to interpret.

    Practical implementation notes

    For progress without a known total, omit value to express an indeterminate task. For a measurement, label the units and range so a value such as 70 is not mistaken for 70 percent completed.

    How to check it

    Check the intended meaning, label, range, and current value for each element.

    Expected result

    Progress describes a running task; meter describes a bounded measurement.

    Watch out: Task completion and a measurement within a range are different concepts.

    Read the reference ↗

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.