Interactive Controls

Progress and Meter

Numbers With Meaning

A status panel displays upload progress and a quality score using the browser built-in numeric controls.

Program

Progress and meter both render bars, but they communicate different meanings. Progress is task completion; meter is a scalar measurement.

progress_meter_status.html
Visuals: captured from real browser rendering
<label for="upload">Upload</label>
<progress id="upload" value="70" max="100">70%</progress>
<label for="score">Quality</label>
<meter id="score" min="0" max="10" value="8">8</meter>

  1. Label the upload progress.

    An Upload label appears.
    The label points to the future progress bar.

  2. Show upload completion.

    A progress bar shows the upload at 70 percent.
    Progress communicates completion of a task.

  3. Label the quality score.

    A Quality label appears under the upload progress.
    A second label names the measurement control.

  4. Show the quality measurement.

    A meter bar shows quality at 8 out of 10.
    Meter communicates a value in a known range.
progress A progress element shows how much of a task is complete.
meter A meter element shows a measured value inside a known range.