Styling HTML5 Meter: Tips and Tutorial

Styling HTML5 Meter: Tips and Tutorial

Hello friends today we gonna learn about Styling HTML5 Meter: Tips and Tutorial. So read this article, Styling HTML5 Meter: Tips and Tutorial step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: Styling HTML5 Meter: Tips and Tutorial

If you are familiar with the HTML progress bar, which shows how much of an activity has been performed, you will see that the gauge element is similar – both show a current value outside of a maximum valueHowever, unlike the progress bar, the meter bar should not be used to display progress.

It is used to create a static value in a specific rangeFor example, you can indicate how much storage space is being used in a disk storage by showing how much of the storage space is filled and how much is not.

In addition, the gauge element can also be used for visualization up up to three regions within reach. For example, reusing the storage space, instead of just showing how much space is occupied, you can also visually indicate whether the space occupied is sparsely filled (let’s say less than 30%) or almost half full (between 30 and 60 %) or more than half full (more than 60%) with different colors. This helps the users to know when they hit the storage limit.

In this post, we’ll show you how to style the meter bar for both purposes mentioned, namely one simple meter (without areas marked) and two examples of meters with 3 areas marked in color. We will continue to work on the latter creating a “brands” meter for showing bad, average and good grades, and a “pH” meter for displaying acidic, neural and alkaline pH values.

back to menu ↑


Before we start with the examples and go deeper, let’s take a quick look at the list of attributes below, more about these attributes, such as their default values, etc., will be covered in the examples.

  • value – The value of the gauge element
  • min – The minimum value of the meter’s range
  • max – The maximum value of the meter’s range
  • low – Indicates the low limit
  • high – Specifies the high limit
  • optimal – The optimal point in the range
back to menu ↑

1. Styling a simple meter

Here’s a very simple example with only one attribute, the value. Before we proceed, we need to know three things:

(1) There is a default min and max value defining the range of the meter, which is 0 and 1 respectively. (2) If the value specified by the user is not within the meter range, the value of min or max is assumed, whichever is the closest. (3) The Ending tag is mandatory.

Here’s the syntax:


Alternatively, we can also add min and max attributes, providing a user-defined range such as:

back to menu ↑

2. Styling the “Marks” meter

First, we need to divide the range into three regions (left / low, middle, right / high). This is where low and high attributes come into play. This is how the three regions are divided.

The three regions are formed between min & low, low & high, and high & max.

Now it is clear that there are certain conditions that low and high values ​​must meet for the three regions to be formed:

  • low cannot be less than min and greater than high & max
  • high cannot be greater than max and less than low & min.
  • And when a criterion is broken, both low and high will take the value of the other variable in the criterion that is not met, i.e. if a low value is found below min which should not be, low will get the min value.

In this example, we will consider our three regions from left to right as:

  • Arm: (0-33)
  • Average: (34-60)
  • Good: (61-100)

Therefore, the following values ​​are for the attributes; min = “0 ″ low =” 34 ″ high = “60 ″ max =” 100 ″.

Here’s an image that visualizes the regions.

Even though there are three regions in the gauge we just created, it will indicate only two “types” regions in just two colors at this point. Why? Because it is optimal in the middle area.

back to menu ↑

Optimal point

Whatever area (of the three) the optimal point falls into, it is considered an “optimal area” that is colored green by default. The region (s) immediately next to it is called the ‘sub-optimal region’ and is colored orange. The most distant region is a “not-much-of-an-optimal region”, colored red.

In our example, we have not yet assigned a value for optimal. Therefore, the default value becomes 50, making the middle region the “optimal region” and the areas next to it (both left and right) as “sub-optimal regions”.

Basically, in the above case, any value for the meter element falling in the middle area is indicated with green; the rest orange.

That’s not what we want. We like it colored this way: Arm (red), Average (Orange), Good (green)

Since the right region should be considered our optimal region, we will give an optimal value that falls in the right region (any value between 61-100, including 61 & 100).

We’ll take 90 for this example. This makes the right region “optimal”, the center (the immediate next region) “sub-optimal” and the far left the “not-much-of-an-optimal” region.

This is what we will get on our meter.

back to menu ↑

2. Styling The “pH” meter

First, a breather on pH levels. An acidic solution has a pH lower than 7, an alkaline solution has a pH higher than 7, and if you get to 7, that’s a neutral solution.

So we will use the following values ​​and attributes:

low = “7 ″, high =” 7 ″, max = “14 ″, and the min will take the default value of zero.

Before adding the rest of the attributes to complete the code, we need to determine the colors: Acid (red), Neutral (white) and Alkaline (blue). Let’s also consider the acidic region (left region below 7) as ‘optimal’

Here are the CSS pseudo-elements we’ll target to get the visual you want firefox(For the webkit meter pseudo elements and more, see the links listed under “reference”.)

.ph_meter {background: light gray; width: 300px;}. ph_meter: -moz-meter-optimum :: – moz-meter-bar {background: indianred;}. ph_meter: -moz-meter-sub-optimal :: – moz -meter-bar {background: antiquewhite;}. ph_meter: -moz-meter-sub-sub-optimum :: – moz-meter-bar {background: steelblue;}

Here is the full html code and the final result of the pH meter.

back to menu ↑


  • HTML5 Meter W3C spec
  • List of webkit pseudo elements and classes
  • List of vendor-specific pseudo elements

More about Hongkiat: Create and style progress bar with HTML5

back to menu ↑

Styling HTML5 Meter: Tips and Tutorial: benefits

  • The Styling HTML5 Meter: Tips and Tutorial tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the Styling HTML5 Meter: Tips and Tutorial guide is free.

back to menu ↑


Tutorial summary of Styling HTML5 Meter: Tips and Tutorial

In this guide, we told you about the Styling HTML5 Meter: Tips and Tutorial; please read all steps so that you understand Styling HTML5 Meter: Tips and Tutorial in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the Styling HTML5 Meter: Tips and Tutorial, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the Styling HTML5 Meter: Tips and Tutorial tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop

back to menu ↑

Final note

I hope you like the guide Styling HTML5 Meter: Tips and Tutorial. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the Styling HTML5 Meter: Tips and Tutorial, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “Styling HTML5 Meter: Tips and Tutorial”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide Styling HTML5 Meter: Tips and Tutorial, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.