The HTML5 element: a guide to attributes, CSS styles, and when NOT to use it for progress bars

Practical examples of using <meter> (real cases and common uses)

Example 1 — Basic meter with animation

This example shows the use of the fundamental attributes: value, max, and min. Additionally, we use a small JavaScript script to vary the value of the meter element at time intervals to observe its dynamic behavior.

Value: 1

To see the full code for this experiment, click here.

Example 2 — Meter with low, high, and optimum ranges

This example combines all the attributes covered: value, max, min, low, high, and optimum. Each sub-example applies one of the CSS pseudo-classes explained in the previous section, so you can see the color change in real time according to the range region where the value falls.

With the help of the previous script, we will see how to:

• Change the background color (container) of the meter bar using ::-webkit-meter-bar:

      #meter2::-webkit-meter-bar {
          background: blue;
      }
  

  
  

  Value: 1

• Change the fill color when the value is within the optimal range (low <= value <= high) using ::-webkit-meter-optimum-value:

      #meter3::-webkit-meter-bar {
          background: blue;
      }
      #meter3::-webkit-meter-optimum-value {
          background: green;
      }

  
  

  Value: 1

• Change the color when the value is outside the optimal range using ::-webkit-meter-suboptimum-value:

      #meter4::-webkit-meter-bar {
          background: blue;
      }
      #meter4::-webkit-meter-suboptimum-value {
          background: yellow;
      }

  
  

  Value: 1

To see the full code for this experiment, click here.

Example 3 — CSS progress bar with gradients

We can also apply gradients to the meter element instead of solid colors, achieving a richer and more customized visual effect:

    #meter5 {
        width: 60%;
        height: 60px;
    }
    #meter5::-webkit-meter-bar {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #eee), color-stop(0.45, #eee), color-stop(0.55, #ccc));
        border-radius: 5px;
    }
    #meter5::-webkit-meter-optimum-value {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
        border-radius: 5px;
    }
    #meter5::-webkit-meter-suboptimum-value {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
        border-radius: 5px;
    }

Value: 1

To see the full code for this experiment, click here.

Basic example with <label>

A good starting point to understand the complete syntax. Note the use of the associated <label> element, which is essential for accessibility:

<label for="nivel">Level:</label>
<meter id="nivel" value="50" min="0" max="100">50 of 100</meter>

Example simulating task progress (based on my experience)

Once I had to display how much a user had completed of a task. Although at first I used <meter>, I ended up switching to <progress> because the task could extend without a fixed limit. Here is how it would have looked with <meter> if the range had been known in advance:

<label for="m1">Task progress</label>
<meter id="m1" value="30" min="0" max="100">30%</meter>

And to update the value dynamically with JavaScript:

let m = document.getElementById("m1");
let v = 0;
setInterval(() => {
  if (v <= 100) {
    m.value = v;
    v++;
  }
}, 100);

Example with ranges and states (temperature)

This is one of the clearest use cases for <meter>: a temperature sensor with well-delimited low, normal, and high zones.

<label for="temp">Temperature level</label>
<meter id="temp" value="65" min="0" max="100" low="30" high="70" optimum="60">65°C</meter>

In this case, since optimum is 60 and the current value (65) is between high and max, the browser will interpret it as a sub-optimal state and render the bar in yellow by default.

Customization and CSS styles: how to change the design of <meter>

WebKit-based browsers (Chrome, Safari, Edge) allow you to customize the appearance of the HTML progress bar using specific pseudo-elements. I had to modify these styles when I wanted my meter to match the project's color palette, and it was easier than I expected.

Specific CSS pseudo-elements for the meter element:

meter::-webkit-meter-optimum-value {
    background: green;
}
meter::-webkit-meter-suboptimum-value {
    background: yellow;
}
meter::-webkit-meter-even-less-good-value {
    background: red;
}

Advanced styles with CSS gradients:

meter::-webkit-meter-bar {
    background: linear-gradient(to bottom, #fff, #ccc);
}

Keep in mind that Firefox does not support -webkit- pseudo-elements. To achieve a custom appearance consistently across all browsers, the most robust strategy is to hide the native <meter> with appearance: none and rebuild the bar using a <div> with pure CSS.

Accessibility of the <meter> element in HTML5

Accessibility is an often-overlooked aspect when using this element. To make a <meter> truly useful for users who rely on assistive technologies (such as screen readers):

• Always associate a <label> using the for attribute pointing to the id of the <meter>. This allows screen readers to announce the purpose of the meter.
• Include descriptive fallback text between the opening and closing tags, for example: <meter value="70" min="0" max="100">70 of 100</meter>. This text is only displayed in browsers that do not support the element.
• When heavily customizing the native element's style (especially if using appearance: none), add the corresponding ARIA attributes so as not to lose semantics: aria-valuenow, aria-valuemin, and aria-valuemax.

Common errors and best practices when using <meter>

• ❌ Error: Using it for indefinite progress.
  • Just what happened to me the first time. If the total for the task is not known, use <progress> without a max attribute to enable indeterminate mode.
• ❌ Error: Not explicitly defining min and max.
  • Although they have default values (0 and 1), omitting them causes the component to lose semantics and can confuse other developers.
• ❌ Error: Passing values outside the defined range.
  • Some browsers ignore the meter or display unexpected behaviors when value falls outside of [min, max].
• ✔ Best Practice: Displaying textual context alongside the meter.
  • Don't limit yourself to the visual bar. Always accompany it with descriptive text, for example: "65% (high temperature)". This is especially useful for users who cannot distinguish the bar's color.

Frequently asked questions about the <meter> element

• ❓ Can I use <meter> to display task progress?
  • Only if the final value is known and fixed. If the total can vary or is unknown at runtime, use <progress>. That is the key semantic distinction between both elements.
• ❓ Can I customize the color and CSS style of the <meter>?
  • Yes, but native customization is limited to -webkit- pseudo-elements and does not work uniformly in Firefox. For total CSS control, use appearance: none and rebuild the bar with a <div>.
• ❓ What happens if I don't define min or max?
  • The browser's default values will be 0 for min and 1 for max. If your value is, for example, 50, the meter will appear completely full because it exceeds the default maximum.
• ❓ What is the difference between <meter> and <progress>?
  • <meter> represents a static measurement within a known range (how much disk space you use). <progress> represents the progress of an ongoing task (how much of a download has completed). Confusing them is the most common semantic mistake in HTML progress bars.

Conclusion

The <meter> element is semantic, powerful, and very useful when you need to represent values within a bounded range. Understanding its attributes (value, min, max, low, high, optimum) and its visual states not only improves the accessibility of your interface, but also allows you to build more honest and communicative components. And as I confirmed when trying to show task progress with it, choosing correctly between <meter> and <progress> makes the difference between a semantically correct interface and one that confuses both the user and assistive technologies.

Learn now about the HTML5 progress bar tag