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.

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.

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

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.

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

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.

<!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>

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**.

<!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>

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.

<!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>

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.

<!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>

© 2007–2024 XoaX.net LLC. All rights reserved.