{"id":17670,"date":"2013-07-17T21:01:09","date_gmt":"2013-07-17T13:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17670"},"modified":"2025-04-24T17:09:00","modified_gmt":"2025-04-24T09:09:00","slug":"html5-battery-status","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/","title":{"rendered":"How to Retrieve and Display Battery Status with HTML5"},"content":{"rendered":"<p>Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to communicate with the device system, including retrieving battery status.<\/p>\n<p>Many people today are on the move with their mobile devices\u2014phones and tablets\u2014everywhere. <a href=\"https:\/\/www.hongkiat.com\/blog\/go\/extraordinary-smartphone-chargers\/\">Battery power<\/a> is still a force of nature to contend with, but we will discuss that another day.<\/p>\n<p>This API may come in handy when, let\u2019s say, you build an App that at some point will run a function that will draw significant power from the battery. If we can retrieve the battery information and then display a notification if the power level is below the app\u2019s requirement, this can advise the user to manage their resources accordingly.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/conserve-smartphone-battery-life\/\" class=\"ref-block__link\" title=\"Read More: How to Conserve Smartphone Battery\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Conserve Smartphone Battery<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/conserve-smartphone-battery-life.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14658 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/conserve-smartphone-battery-life.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Conserve Smartphone Battery<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tSmartphones these days have a diverse range of capabilities and multi-functionality running on powerful operating systems. However, this...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>How to Use the Battery Status API<\/h2>\n<p>In this example, however, I\u2019m not going to build an app. Rather, we are going to simply retrieve the battery status and display it in the browser. Sadly, the support for this API is not great. At the time of writing, it only works in <strong>Firefox 10+ (with prefix)<\/strong>.<\/p>\n<p>The battery status is accessed via <code>navigator.battery<\/code>, and to get the battery level, we use <code>navigator.battery.level<\/code>. The battery level output is in decimal format, so we multiply it by 100 to get a percentage value, like so:<\/p>\n<pre>\nvar battery = navigator.battery;\nvar level = battery.level * 100;\nvar levelBar = $('.level');\n<\/pre>\n<p>The API also provides the <code>charging<\/code> property, which we can use to identify whether the battery is currently charging.<\/p>\n<p>In the following code snippet, we add an HTML class to our markup based on the battery status, allowing us to apply specific style rules later in the CSS.<\/p>\n<pre>\nif (battery.charging) {\n  levelBar.addClass('charging');\n} else if (level > 65) {\n  levelBar.addClass('high');\n} else if (level >= 35) {\n  levelBar.addClass('med');\n} else {\n  levelBar.addClass('low');\n}\n<\/pre>\n<p>In the code above, if the battery is <strong>being charged<\/strong>, we add a class named <code>charging<\/code>. Otherwise, we add the classes <code>high<\/code>, <code>med<\/code>, or <code>low<\/code> based on the specified battery level range. Then, we also need to set the width of the status bar to reflect the battery level.<\/p>\n<pre>\n  levelBar.css('width', level + '%');\n}\n<\/pre>\n<p>In CSS, we set the battery styles and colors as follows:<\/p>\n<pre>\n.battery .level {\n  height: 100%;\n  width: 2%; \/* Default width, gets overridden by JS *\/\n}\n\n.battery .level.high {\n  background-color: #27AE60;\n}\n\n.battery .level.med {\n  background-color: #E67E22;\n}\n\n.battery .level.low {\n  background-color: #E74C3C;\n}\n\n.battery .level.charging {\n  background-color: #27AE60;\n  width: 100%;\n  text-align: center;\n}\n\n.battery .level.charging:before {\n  content: '\\e800'; \/* Ensure backslash is escaped for CSS *\/\n  display: block;\n  height: 100%;\n  width: 100%;\n  color: #fff;\n  line-height: 40px;\n  font-family: 'Battery';\n  font-size: 25px;\n}\n<\/pre>\n<p>That\u2019s all! Head over to the demo page to see it in action. Just make sure you are on a portable device like a laptop and open the demo in the latest Firefox version for it to work.<\/p>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/html5-battery-status\/\">View Demo<\/a>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/html5-battery-status\/\">Download Source<\/a>\n<\/div>\n<h2>Further Reference<\/h2>\n<ul>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/battery-status\/\">Battery Status API<\/a> \u2013 W3C <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/WebAPI\/Battery_Status\">Battery Status API<\/a> \u2013 MDN <\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to communicate with the device system, including retrieving battery status. Many people today are on the move with their mobile devices\u2014phones and tablets\u2014everywhere. Battery power is still a force of nature to contend&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[506,2016],"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 Retrieve and Display Battery Status with HTML5 - Hongkiat<\/title>\n<meta name=\"description\" content=\"Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to\" \/>\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\/html5-battery-status\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Retrieve and Display Battery Status with HTML5\" \/>\n<meta property=\"og:description\" content=\"Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/\" \/>\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=\"2013-07-17T13:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:09:00+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Retrieve and Display Battery Status with HTML5\",\"datePublished\":\"2013-07-17T13:01:09+00:00\",\"dateModified\":\"2025-04-24T09:09:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/\"},\"wordCount\":393,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/\",\"name\":\"How to Retrieve and Display Battery Status with HTML5 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2013-07-17T13:01:09+00:00\",\"dateModified\":\"2025-04-24T09:09:00+00:00\",\"description\":\"Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-battery-status\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Retrieve and Display Battery Status with HTML5\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Retrieve and Display Battery Status with HTML5 - Hongkiat","description":"Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to","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\/html5-battery-status\/","og_locale":"en_US","og_type":"article","og_title":"How to Retrieve and Display Battery Status with HTML5","og_description":"Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-07-17T13:01:09+00:00","article_modified_time":"2025-04-24T09:09:00+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Retrieve and Display Battery Status with HTML5","datePublished":"2013-07-17T13:01:09+00:00","dateModified":"2025-04-24T09:09:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/"},"wordCount":393,"commentCount":18,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/","name":"How to Retrieve and Display Battery Status with HTML5 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2013-07-17T13:01:09+00:00","dateModified":"2025-04-24T09:09:00+00:00","description":"Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-battery-status\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Retrieve and Display Battery Status with HTML5"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4B0","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17670","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17670"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17670\/revisions"}],"predecessor-version":[{"id":74101,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17670\/revisions\/74101"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17670"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}