Battery Indicator Element

Battery status indicator custom element.

• Uses LitElement, a lightweight class that extends HTMLElement.

Usage

<battery-indicator percentage="85"></<battery-indicator>

Theming

Example

battery-indicator {
  width: 48px;
  height: 48px;
  --charge-fill: #000;
  --charge-fill-opacity: 1.0;
  --background-fill: #000;
  --background-fill-opacity: 0.3;
  --status-fill: #fff;
  --status-fill-opacity: 1.0;
}

Available Variables

variable name	default	description
--charge-fill	#000	Fill color of area that represents charge.
--charge-fill-opacity	1.0	Opacity of area that represents charge.
--background-fill	#000	Fill color of background.
--background-fill-opacity	0.3	Opacity of background.
--status-fill	#fff	Fill color of status icon (unknown, alert, charging).
--status-fill-opacity	1.0	Opacity of status icon (unknown, alert, charging).
--percentage-font-size	16px	Font size of the percentage.
--percentage-color	#000	Color of the percentage.

Browser Support

This element requires ES2015 language features and the following browser APIs:

• Custom Elements (V1)
• CSS Variables

Development

1. npm ci
2. npm start
3. http://localhost:8080

To Do

• Make status scale to fill container with percentage
• Add test suite