{"id":21593791,"url":"https://github.com/protoss78/battery-status-icon","last_synced_at":"2026-01-03T09:47:10.976Z","repository":{"id":36099487,"uuid":"40400618","full_name":"Protoss78/battery-status-icon","owner":"Protoss78","description":"A web component that detects and displays the current battery status as an icon. It uses Polymer 1.x and HTML5 Navigator.getBattery() API.","archived":false,"fork":false,"pushed_at":"2017-05-28T06:12:20.000Z","size":12151,"stargazers_count":9,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-27T06:02:27.894Z","etag":null,"topics":["battery","battery-api","battery-status","battery-status-icon","status"],"latest_commit_sha":null,"homepage":"https://www.webcomponents.org/element/Protoss78/battery-status-icon","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Protoss78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-08T11:19:42.000Z","updated_at":"2020-11-17T18:43:37.000Z","dependencies_parsed_at":"2022-08-30T16:11:14.577Z","dependency_job_id":null,"html_url":"https://github.com/Protoss78/battery-status-icon","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Protoss78%2Fbattery-status-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Protoss78%2Fbattery-status-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Protoss78%2Fbattery-status-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Protoss78%2Fbattery-status-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Protoss78","download_url":"https://codeload.github.com/Protoss78/battery-status-icon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244206694,"owners_count":20416086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["battery","battery-api","battery-status","battery-status-icon","status"],"created_at":"2024-11-24T17:14:43.236Z","updated_at":"2026-01-03T09:47:10.935Z","avatar_url":"https://github.com/Protoss78.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Protoss78/battery-status-icon)\n\n# battery-status-icon\nA web component that autodetects and displays the current battery status as an icon. It uses Polymer 1.x and the new HTML5 Navigator.getBattery() API. Alternatively the battery level and charging status can also be set from the outside (e.g. in combination with Cordova and the battery plugin).\n\nInstall:\n```\nbower i battery-status-icon -S\n```\n\n### Example:\n\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"battery-status-icon.html\"\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cbattery-status-icon\u003e\u003c/battery-status-icon\u003e\n\u003cbattery-status-icon level=\"33\" charging\u003e\u003c/battery-status-icon\u003e\n\u003cbattery-status-icon level=\"15\" show-label\u003e\u003c/battery-status-icon\u003e\n\u003cbattery-status-icon level=\"50\" show-label label-position=\"top\"\u003e\u003c/battery-status-icon\u003e\n\u003cbattery-status-icon level=\"66\" color-levels\u003e\u003c/battery-status-icon\u003e\n\u003cbattery-status-icon autodetect show-label color-levels\u003e\u003c/battery-status-icon\u003e\n```\n\n__Attributes:__\n\nAttribute | Description | Default\n  ----------------|-------------|----------\n  `autodetect` | Auto detect battery level, rather than static input | `false`\n  `charging` | Detects if device is charging (Can be set manually) | `false`\n  `color-levels` | Change color depending on remaining battery level | `false`\n  `label-position` | Where the label should render (top, right, bottom, left) | `right`\n  `level` | Container for battery level value(Can be set manually) | `NULL`\n  `show-label` | Shows label on mouse over if true. | `false`\n\n### Styling\n    \n  The following custom properties are available for styling:\n  \n  Custom property | Description | Default\n  ----------------|-------------|----------\n  `--battery-icon-size` | Size of battery icon displayed. | `24px`\n  `--battery-default-color` | Color of battery when colorLevels is false. | `#323`\n  `--battery-high-color` | Color of battery when above 80%. | `Green`\n  `--battery-mid-color` | Color of battery when between 80% \u003e\u003c 20%. | `Orange`\n  `--battery-low-color` | Color battery when below 20%. | `Red`\n  `--battery-label-background` | Background color of tooltip label. | `#616161`\n  `--battery-label-opacity` | Opacity level of tooltip label. | `0.9`\n  `--battery-label-text-color` | Text color of tooltip label | `White`\n  `--battery-icon-rotate` | Use rotate(x) to rotate the battery icon.\u003cbr\u003eSample: --battery-icon-rotate: rotate(270deg); | `rotate(0deg)`\n  \n  __Style example:__\n  \n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"battery-status-icon.html\"\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cstyle\u003e\n    .changing-example {\n        --battery-low-color: #D32F2F;\n        --battery-mid-color: #F57C00;\n        --battery-high-color: #388E3C;\n        --battery-icon-size: 48px;\n        --battery-label-background: #455A64;\n        --battery-label-opacity: 1;\n        --battery-label-text-color: #CFD8DC;\n    }\n    /* Battery Icon is rotated by 270° (left to right) */\n    .left-to-right {\n      --battery-icon-rotate: rotate(270deg);\n    }\n    \n    /* Battery Icon is rotated by 90° (right to left) */\n    .right-to-left {\n      --battery-icon-rotate: rotate(90deg);\n    }\n\u003c/style\u003e\n\u003cbattery-status-icon label-position=\"bottom\" class=\"changing-example\" level=\"0\" color-levels\n                     charging show-label\u003e\u003c/battery-status-icon\u003e                               \n\u003cbattery-status-icon class=\"left-to-right\" autodetect show-label color-levels\u003e\u003c/battery-status-icon\u003e\n\u003cbattery-status-icon class=\"right-to-left\" autodetect show-label color-levels\u003e\u003c/battery-status-icon\u003e\n```  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotoss78%2Fbattery-status-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprotoss78%2Fbattery-status-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotoss78%2Fbattery-status-icon/lists"}