{"id":23724,"date":"2015-04-21T21:01:40","date_gmt":"2015-04-21T13:01:40","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23724"},"modified":"2024-09-03T22:25:26","modified_gmt":"2024-09-03T14:25:26","slug":"style-html5-meter","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/","title":{"rendered":"How to Use and Style the HTML5 Meter Element for Visual Indicators"},"content":{"rendered":"<p>If you\u2019re familiar with the HTML progress bar, which shows how much of an activity has been completed, you\u2019ll find the <code>meter<\/code> element similar in that both <strong>display a current value out of a maximum value<\/strong>. However, unlike the progress bar, the meter is not used to indicate progress over time.<\/p>\n<p>The <code>meter<\/code> element is used to display a <strong>static value within a specific range<\/strong>. For instance, you can indicate the storage space used on a disk by showing how much of the storage is occupied versus how much is available.<\/p>\n<p>Moreover, the meter element can be used to visualize up to three regions within its range. Returning to the storage space example, you can visually indicate whether the occupied space is below 30%, between 30% and 60%, or above 60% using different colors. <strong>This helps users quickly understand how close they are to reaching the storage limit.<\/strong><\/p>\n<p>In this post, we\u2019ll explore <strong>how to style the meter bar<\/strong> for both a <strong>simple gauge<\/strong> (with no region indicators) and more advanced examples featuring gauges with three color-indicated regions. Specifically, we will create a <strong>\u201cmarks\u201d gauge<\/strong> for representing poor, average, and good marks, as well as a <strong>\u201cpH\u201d gauge<\/strong> for displaying acidic, neutral, and alkaline pH values.<\/p>\n<h2>Understanding Meter Attributes<\/h2>\n<p>Before diving into examples, let\u2019s review the attributes of the <code>meter<\/code> element. A deeper exploration of these attributes, including their defaults, will be provided in the examples.<\/p>\n<ul>\n<li><code>value<\/code> \u2013 The value of the <code>meter<\/code> element.<\/li>\n<li><code>min<\/code> \u2013 The minimum value of the meter\u2019s range.<\/li>\n<li><code>max<\/code> \u2013 The maximum value of the meter\u2019s range.<\/li>\n<li><code>low<\/code> \u2013 Indicates the low boundary value.<\/li>\n<li><code>high<\/code> \u2013 Indicates the high boundary value.<\/li>\n<li><code>optimum<\/code> \u2013 The optimum point in the range.<\/li>\n<\/ul>\n<h2>1. Styling a Simple Gauge<\/h2>\n<p>Here\u2019s a straightforward example using only one attribute: <code>value<\/code>. Before proceeding, there are three key points to note:<\/p>\n<ol>\n<li>The default <code>min<\/code> and <code>max<\/code> values for the <code>meter<\/code> range are 0 and 1, respectively.<\/li>\n<li>If the user-specified <code>value<\/code> does not fall within the meter\u2019s range, it will default to either the <code>min<\/code> or <code>max<\/code> value, depending on which it is closest to.<\/li>\n<li>The ending tag is mandatory.<\/li>\n<\/ol>\n<p>Here\u2019s the syntax:<\/p>\n<pre>\r\n&lt;meter value=\"0.5\"&gt;0.5&lt;\/meter&gt;\r\n<\/pre>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-1.jpg\" alt=\"HTML5 meter element example showing a value of 0.5 out of 1\" width=\"50%\"><\/figure>\n<p>Alternatively, you can add the <code>min<\/code> and <code>max<\/code> attributes to define a custom range:<\/p>\n<pre>\r\n&lt;meter min=\"10\" max=\"100\" value=\"30\"&gt;&lt;\/meter&gt;\r\n<\/pre>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-2.jpg\" alt=\"HTML5 meter element example showing a value of 30 within a custom range of 10 to 100\" width=\"50%\"><\/figure>\n<h2>2. Styling the \u201cMarks\u201d Gauge<\/h2>\n<p>To create a \u201cmarks\u201d gauge, we\u2019ll divide the range into three regions: low, middle, and high. This is where the <code>low<\/code> and <code>high<\/code> attributes come into play, dividing the range into:<\/p>\n<ul>\n<li><strong>Poor<\/strong>: 0-33<\/li>\n<li><strong>Average<\/strong>: 34-60<\/li>\n<li><strong>Good<\/strong>: 61-100<\/li>\n<\/ul>\n<p>The corresponding attributes are: <code>min=\"0\" low=\"34\" high=\"60\" max=\"100\"<\/code>.<\/p>\n<p>Here is a visualization of the regions:<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/pic-1.jpg\" alt=\"Visual representation of the meter element with Poor, Average, and Good regions\" width=\"650\"><\/figure>\n<p>Even though our meter has three regions, it currently displays only two colors because <code>optimum<\/code> falls in the mid-region.<\/p>\n<h3>Setting the Optimum Point<\/h3>\n<p>The region where the <code>optimum<\/code> point falls is considered the \u201coptimal region,\u201d which is green by default. The adjacent regions are \u201csub-optimal\u201d and are colored orange, while the farthest region is \u201cnon-optimal\u201d and colored red.<\/p>\n<p>In our example, we haven\u2019t set an <code>optimum<\/code> value yet, so it defaults to 50, making the mid-region green and the others orange.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/pic-2.jpg\" alt=\"HTML5 meter element with default optimum point in the middle region\" width=\"655\" height=\"180\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-3.jpg\" alt=\"Example showing green and orange regions in HTML5 meter element\" width=\"437\" height=\"138\"><\/figure>\n<p>But that\u2019s not what we want. We want the \u201cPoor\u201d region in red, \u201cAverage\u201d in orange, and \u201cGood\u201d in green.<\/p>\n<p>To achieve this, we will set <code>optimum<\/code> to a value in the \u201cGood\u201d region (61-100). In this example, we\u2019ll use 90. This makes the \u201cGood\u201d region optimal (green), the \u201cAverage\u201d region sub-optimal (orange), and the \u201cPoor\u201d region non-optimal (red).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/pic-3.jpg\" alt=\"HTML5 meter element styled with red, orange, and green regions\" width=\"655\" height=\"180\"><\/figure>\n<p>This is the result:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-5.jpg\" alt=\"Final result of the HTML5 meter element styled with custom regions and colors\" width=\"547\" height=\"154\"><\/figure>\n<h2>3. Styling the \u201cpH\u201d Gauge<\/h2>\n<p class=\"note\">Before we begin our final example, note that the CSS styles are User Agent-dependent and experimental.<\/p>\n<p>A quick refresher on pH values: An acidic solution has a pH below 7, an alkaline solution has a pH above 7, and a neutral solution has a pH of exactly 7.<\/p>\n<p>We\u2019ll use the following attributes: <code>low=\"7\"<\/code>, <code>high=\"7\"<\/code>, <code>max=\"14\"<\/code>, with <code>min<\/code> defaulting to 0.<\/p>\n<p>For colors, we\u2019ll use <strong>Acidic<\/strong> (red), <strong>Neutral<\/strong> (white), and <strong>Alkaline<\/strong> (blue). The acidic region (below 7) will be considered \u201coptimal.\u201d<\/p>\n<p>Here are the CSS pseudo-elements we\u2019ll target to achieve the desired visual in <strong>Firefox<\/strong> (For Webkit meter pseudo-elements and more, refer to the links listed under \u201cReferences\u201d):<\/p>\n<pre>\r\n.ph_meter {\r\n  background: lightgrey;\r\n  width: 300px;\r\n}\r\n.ph_meter:-moz-meter-optimum::-moz-meter-bar {\r\n  background:indianred;\r\n}\r\n.ph_meter:-moz-meter-sub-optimum::-moz-meter-bar {\r\n  background: antiquewhite;\r\n}\r\n.ph_meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {\r\n  background: steelblue;\r\n}\r\n<\/pre>\n<p>Here is the complete HTML code and the final result of the pH gauge:<\/p>\n<pre>\r\n&lt;meter class=\"ph_meter\" low=\"7\" high=\"7\" optimum=\"2\" max=\"14\" value=\"6\"&gt;&lt;\/meter&gt;\r\n&lt;meter class=\"ph_meter\" low=\"7\" high=\"7\" optimum=\"2\" max=\"14\" value=\"7\"&gt;&lt;\/meter&gt;\r\n&lt;meter class=\"ph_meter\" low=\"7\" high=\"7\" optimum=\"2\" max=\"14\" value=\"8\"&gt;&lt;\/meter&gt;\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-4.jpg\" alt=\"Final result of the pH gauge styled with custom colors\" width=\"512\" height=\"140\"><\/figure>\n<h2>References<\/h2>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dev.w3.org\/html5\/spec-preview\/the-meter-element.html\">HTML5 Meter W3C spec<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/trac.webkit.org\/wiki\/Styling%20Form%20Controls\">List of WebKit pseudo-elements & classes<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gist.github.com\/webtobesocial\/aefd6e25064c08e0cc9a\">List of vendor-specific pseudo-elements<\/a><\/li>\n<\/ul>\n<p>More on Hongkiat: <a href=\"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/\">Creating & Styling Progress Bar With HTML5<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>If you\u2019re familiar with the HTML progress bar, which shows how much of an activity has been completed, you\u2019ll find the meter element similar in that both display a current value out of a maximum value. However, unlike the progress bar, the meter is not used to indicate progress over time. The meter element is&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[506],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use and Style the HTML5 Meter Element for Visual Indicators - Hongkiat<\/title>\n<meta name=\"description\" content=\"If you&#039;re familiar with the HTML progress bar, which shows how much of an activity has been completed, you&#039;ll find the meter element similar in that both\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use and Style the HTML5 Meter Element for Visual Indicators\" \/>\n<meta property=\"og:description\" content=\"If you&#039;re familiar with the HTML progress bar, which shows how much of an activity has been completed, you&#039;ll find the meter element similar in that both\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-21T13:01:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T14:25:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-1.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Use and Style the HTML5 Meter Element for Visual Indicators\",\"datePublished\":\"2015-04-21T13:01:40+00:00\",\"dateModified\":\"2024-09-03T14:25:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/\"},\"wordCount\":704,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/style-html5-meter\\\/res-1.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/\",\"name\":\"How to Use and Style the HTML5 Meter Element for Visual Indicators - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/style-html5-meter\\\/res-1.jpg\",\"datePublished\":\"2015-04-21T13:01:40+00:00\",\"dateModified\":\"2024-09-03T14:25:26+00:00\",\"description\":\"If you're familiar with the HTML progress bar, which shows how much of an activity has been completed, you'll find the meter element similar in that both\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/style-html5-meter\\\/res-1.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/style-html5-meter\\\/res-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/style-html5-meter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use and Style the HTML5 Meter Element for Visual Indicators\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use and Style the HTML5 Meter Element for Visual Indicators - Hongkiat","description":"If you're familiar with the HTML progress bar, which shows how much of an activity has been completed, you'll find the meter element similar in that both","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/","og_locale":"en_US","og_type":"article","og_title":"How to Use and Style the HTML5 Meter Element for Visual Indicators","og_description":"If you're familiar with the HTML progress bar, which shows how much of an activity has been completed, you'll find the meter element similar in that both","og_url":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-04-21T13:01:40+00:00","article_modified_time":"2024-09-03T14:25:26+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-1.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Use and Style the HTML5 Meter Element for Visual Indicators","datePublished":"2015-04-21T13:01:40+00:00","dateModified":"2024-09-03T14:25:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/"},"wordCount":704,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-1.jpg","keywords":["HTML"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/","url":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/","name":"How to Use and Style the HTML5 Meter Element for Visual Indicators - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-1.jpg","datePublished":"2015-04-21T13:01:40+00:00","dateModified":"2024-09-03T14:25:26+00:00","description":"If you're familiar with the HTML progress bar, which shows how much of an activity has been completed, you'll find the meter element similar in that both","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-1.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/style-html5-meter\/res-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/style-html5-meter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use and Style the HTML5 Meter Element for Visual Indicators"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6aE","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23724"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23724\/revisions"}],"predecessor-version":[{"id":72787,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23724\/revisions\/72787"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23724"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}