Progress and meter tags in html5 to display process status with attributes & examples <progress>

The <progress> and <meter> tags in HTML5 are used to represent the progress of a task and a scalar measurement within a known range, respectively. While the <progress> tag indicates the completion progress of a task, the <meter> tag represents a measurement, such as disk usage or temperature, within a specified range.

Attributes of progress tag

Value:

Valid Float number indicating amount of process completion, this should be less than or equal to Maximum value. If Maximum value is not there then it should be less than or equal to 1.0 , if the value is given as 0.2 then it is treated as 20 % completion.

Max:

Amount of total process completion. This should be more than or equal to value attribute. If the max value is only there without any value attribute then progress is shown as indeterminate

Examples of Progress tag

Here are some examples with different combination of attributes.

25%

<progress value="25" max="100">25%</progress>

<progress value="50" max="100">50%</progress>

100%

<progress value="100" max="100">100%</progress>

100%

<progress max="100">100%</progress>

50%

<progress value="1.0">50%</progress>

Uses of Progress tag

More practical uses of progress tag is when it is used along with JavaScript. It can be connected to background processing like records updated, file uploaded or downloaded etc .

Attributes of <meter> Tag

The <meter> tag supports several attributes:

value: Specifies the current value of the measurement.
min: Defines the lower bound of the range. Default is 0.
max: Defines the upper bound of the range. Default is 1.
low: Indicates the lower bound of the "low" range.
high: Indicates the upper bound of the "high" range.
optimum: Specifies the optimal value within the range.

Examples of <meter> Tag

Example 1: Disk Usage

<label for="diskUsage">Disk Usage:</label>
<meter id="diskUsage" min="0" max="100" value="70">70%</meter>

Disk Usage: 70%

Example 2: Battery Level

<label for="batteryLevel">Battery Level:</label>
<meter id="batteryLevel" min="0" max="100" 
	low="20" high="80" optimum="90" 
	value="50">50%</meter>

Battery Level: 50%

Styling <meter> Tag with CSS

The appearance of the <meter> tag can be customized using CSS. However, styling support varies across browsers. Here's an example of how to style the <meter> tag:

meter {
    width: 100%;
    height: 20px;
}

meter::-webkit-meter-bar {
    background: #f4f4f4;
}

meter::-webkit-meter-optimum-value {
    background: #2c3e50;
}

meter::-webkit-meter-suboptimum-value {
    background: #e6d450;
}

meter::-webkit-meter-even-less-good-value {
    background: #f28f68;
}

Note: The above CSS uses vendor-specific pseudo-elements to style the <meter> tag in WebKit-based browsers (e.g., Chrome, Safari). Other browsers may require different approaches.

Use Cases for <meter> Tag

Disk Usage: Displaying the amount of disk space used out of the total available.
Battery Level: Indicating the current battery charge percentage.
Poll Results: Showing the percentage of votes received by a candidate.
Temperature Reading: Representing the current temperature within a specified range.

Accessibility Considerations

To ensure the <meter> tag is accessible to all users, including those using screen readers, provide a label that describes the purpose of the meter. Additionally, consider using ARIA attributes to enhance accessibility.

Conclusion

The <meter> tag is a valuable addition in HTML5 for representing scalar measurements within a known range. By understanding its attributes and styling capabilities, we can effectively use it to display various types of data, enhancing the user experience on our web pages.

how Progress bar is managed by JavaScript button Click event

PHP & Ajax is used to update value of a progress bar

Progress bar using JQuery UI

HTML5 Tags HTML Font style by CSS Managing font size and style