Battery-indicator-element NPM

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.