Lesson 30: Progress Versus Meter

Overview

In this HTML lesson, we demonstrate how to use the progress and meter elements. The progress element is used to indicate the level of completion of a task. For example, we might use a progress element to indicate the amount of a file that has been uploaded. A meter, on the other hand, is used to measure something that varies over time. We might use a meter to indicate speed, as we do with a speedometer. These two elements are similar, but their purposes are distinct.

Progress Element Defaults

A progress element is used to measure the progress of a process. That process can be anything that progresses from start to finish, like downloading a file or performing a complex calculation. By default, the value that specifies the progress is between 0 and 1, where 0 represents no progress and 1 represents complete prgress.

Our first example, has two progress elements, the first one has its value attribute set to .4. This is 40% of the way from 0 to 1. So, it represents a 40% complete process, and its progress bar is 40% full.

The second progress element has no value specified in it. So, it is said to be indeterminate. That is, the level of progress is unknown. When this progress element opened in a browser, the bar animation runs over the whole range of values to illustrate that the progress is unknown. We can use this to represent an action that progresses when the progress can not be determined.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <progress value=".4"></progress><br />
    <progress></progress>
  </body>
</html>

Output

A Typical Progress Element

Our first examples were somewhat bare. This example has a label to indicate that it represents a file that is being downloaded. It also has its max attribute set to 1000. This changes the value range from 0 to 1 to 0 to 1000. So, when we set the value to 624, it represents a task that is 624/1000 = 62.4% complete.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    Downloading: <progress value="624" max="1000">624 of 1000</progress>
  </body>
</html>

Output

Progress and Meter

In this example, we show both a progress element and a meter element for comparison. The progress element is used to represent a task that is progressing, while a meter is used to represent a value in a range that can vary, like the speed in a speedometer. Both elements use bars to repesent their values. However, the meter is used to represent a wider variety of phenomena. So, it is a slightly more complex.

By default, both the value of the progress element and the meter element are in the range 0 to 1. In this example, we set the value attribute of both elements to .6 or 60%. The default styling for the progress element uses the color blue and a longer bar to represent progress, while the meter uses the color green and a shorter bar to represent its value.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    Calculating: <progress value=".6">60%</progress><br />
    Disk Usage: <meter value=".6">60%</meter>
  </body>
</html>

Output

Max and Min Attributes

Like the progress element, we can change the range of values of the meter. In fact, we can change the min as well as the max on the meter element. In this case, the meter values lie in the range from min to max. For a given value, the fill level of the bar is (value-min)/(max-min)%. If the value is set below the min or is not set, the value is set to min. If the value is set above the max, the value is set to max.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    Min 40, Max 200<br />
    Fuel (100): <meter value="100" min="40" max="200">100</meter><br />
    Unspecified: <meter min="40" max="200"></meter><br />
    Below Min (10): <meter value="10" min="40" max="200"></meter><br />
    Above Max (210): <meter value="210" min="40" max="200"></meter><br />
    Blank: <meter></meter>
  </body>
</html>

Output

High and Low Attributes

In addition to the min and max attributes, we can set the low and high attributes to represent an ideal range. In this case, min ≤ low ≤ high ≤ max, and the values in the interval [low, high] represent ideal values. For the value in the ideal range, the meter is colored green, and for a value outside this range, the meter is colored yellow to show that it is not ideal.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    Min 40, Max 200, Low 80, High 160<br />
    Fuel: <meter value="60" min="40" max="200" low="80" high="160"></meter><br />
    Fuel: <meter value="120" min="40" max="200" low="80" high="160"></meter><br />
    Fuel: <meter value="180" min="40" max="200" low="80" high="160"></meter>
  </body>
</html>

Output

The Optimum Attribute

The optimum attribute allows us to set our ideal range to any of the three ranges specified by the values min ≤ low ≤ high ≤ max. That is, if the optimum is < low, then the half-open interval [min, low) is considered optimal. If the optimum is in [low, high], then that interval is considered optimal. If the optimum is > high, then the half-open interval (high, max] is considered optimal.

Values in the optimal range are always displayed with a green colored bar. Values in the interval next to the optimal range are displayed with yellow bars to show that they are close to optimal. Finally, values that are two intervals away from the optimum are displayed with red colored bars to show that they are far from optimal.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    Optimum 60, Min 10, Max 100, Low 40, High 80<br />
    Charge: <meter value="20" min="10" max="100" low="40" high="80" optimum="60"></meter><br />
    Charge: <meter value="40" min="10" max="100" low="40" high="80" optimum="60"></meter><br />
    Charge: <meter value="60" min="10" max="100" low="40" high="80" optimum="60"></meter><br />
    Charge: <meter value="80" min="10" max="100" low="40" high="80" optimum="60"></meter><br />
    Charge: <meter value="100" min="10" max="100" low="40" high="80" optimum="60"></meter><br />
    <br />
    Optimum 30, Min 10, Max 100, Low 40, High 80<br />
    Charge: <meter value="30" min="10" max="100" low="40" high="80" optimum="30"></meter><br />
    Charge: <meter value="60" min="10" max="100" low="40" high="80" optimum="30"></meter><br />
    Charge: <meter value="90" min="10" max="100" low="40" high="80" optimum="30"></meter><br />
    <br />
    Optimum (30, 60, 90), Min 10, Max 100, Low 40, High 80<br />
    Charge: <meter value="90" min="10" max="100" low="40" high="80" optimum="30"></meter><br />
    Charge: <meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter><br />
    Charge: <meter value="90" min="10" max="100" low="40" high="80" optimum="90"></meter>
  </body>
</html>