Surely, you've come across some progress bars on websites, for example, when you download a game or software from some popular websites, that show the completion progress of a given task. But did you know that you can also create such a progress bar using HTML? In fact, you can also customize such progress bars according to your requirements using JavaScript. In this topic, we will focus only on how to create such completion bars using HTML.
Progress tag
The HTML <progress> tag is used when you want to display the progress of a task. You can also create such progress bars with the help of CSS only, but with the <progress> tag it's quite easy.
Let's review the syntax of the <progress> tag in HTML. The progress element can be both indeterminate and determinate.
<progress> </progress>The above syntax will also create a progress bar, but it will be an indeterminate one. It means that it won't display the completion of a task accurately because we haven't provided a value to the progress bar. You can try it out in your IDE and see the result. To create a determinate progress bar, apply the attributes listed below to the <progress> element.
These are the different attributes supported by the <progress> tag in HTML:
max: This attribute of the progress tag specifies how much work the task requires to complete in total. For example, to download a movie, the maximum value should be 100, hence the value of the max attribute is equal to 100. The default value of the max attribute is
1and if it is present in the progress tag it must have a value greater than0.value: The value attribute specifies how much of the task has been completed. As the definition suggests, the value of this attribute must be between
0andmax.
The progress tag is not used or is not advisable to use for representing a gauge, like disk space, and so on.
It is advisable to use the <label> tag for best accessibility practices.
Example of progress tag
<body>
<label for="progress-bar-1">Downloading movieName..</label>
<progress
id="progress-bar"
value="89"
max="100"
title="percentage">
</progress><br /><br />
<label for="progress-bar-2">Downloading thatMovieName</label>
<progress
id="progress-bar-2"
value="50"
max="100"
title="percentage">
</progress>
</body>The image below shows the output of the code snippet given above.
As you can see in the example, the commonly used title attribute is applied. When you hover over the progress bar it'll show the value of the title attribute as a tooltip.
Meter tag
The <meter> tag is similar to the progress tag in HTML but it represents a scalar value of measurement within a specified range. You can call this meter a gauge. The <meter> tag should be used instead of the <progress> tag when you want to display a scalar measurement within a range, for example, disk usage.
<meter> </meter>The HTML <meter> tag supports various attributes listed below:
value: This is the current value of the meter (gauge). It must be between
minandmaxvalues if specified.min: The
minattribute is the lower bound of the measured range. It must be less than the max attribute value (if specified). If the min attribute is not specified, then the min value is 0.max: The
maxattribute specifies the upper bound of the measured range. It must be greater than the min attribute value (if specified). If the max attribute is not specified then the max value is 1.low: The
lowattribute is the upper numeric bound of the low end of the measured range. It must be greater than the min attribute and it should also be less than the max and high attributes.high: The
highattribute is the lower numeric bound of the high end of the measured range. It must be less than the max attribute and also greater than the low and min attributes.optimum: This attribute specifies the optimum value and it must be within a specified range of min and max attribute values.
Example of meter tag
<body>
<label for="high-disk-space">High Disk Space:</label>
<meter
low="20"
high="95"
min="10"
max="100"
optimum="50"
value="85">
</meter> <br /><br />
<label for="low-disk-space">Low Disk Space:</label>
<meter
low="20"
high="95"
min="10"
max="100"
optimum="50"
value="19">
</meter>
</body>The image below shows the output of the code snippet given above.
As shown in the output above, some browsers may color the meter differently based on the different attributes that you set.
Conclusion
In this topic, you've learned about two HTML elements, <progress> and <meter>. The HTML <progress> tag is used when you want to display the progress of a task. The progress bar can be of two types: indeterminate and determinate. We are concerned only with the determinate ones as they signify some completion or the progress of a task. The <meter> tag is similar to the progress tag in HTML but it represents a scalar value of a measurement within a specified range. We've also discussed different attributes that enhance the usability of the <progress> and <meter> tags.