HASS Progress Bar Feature

---

A HACS integration which adds a feature to display a simple progress bar with custom colors. Can be added to any component that supports features.

Installation

Options

Card Options

Name	Type	Default	Description
entity	string		Entity id of a sensor that goes from 0 - 100
attribute	string		Attribute of the tile entity that goes from 0 - 100
time	time object		Time to derive progress from
inverse	boolean	false	Show the inverse percentage (ie, 85% -> 15%)
position	string	bottom	Progress bar position, only accepts top or bottom
size	string	--feature-height or 3px if position is specified	CSS value for progress bar height
color	string	--primary-color	Progress bar color. Can be any valid CSS value, a HASS CSS color variable, or the keyword meter which will change color based on progress on a gradient from 0 = red to 100 = green
background	string	20% opacity variant of color value	Progress bar background color. Can be any valid CSS value, a HASS CSS color variable

Time object

Name	Type	Default	Description
initial	string		Attribute or entity id of a sensor that outputs an initial time, MUST be used in conjunction with remaining or duration
remaining	string		Attribute or entity id of a sensor that outputs a remaining time, MUST be used in conjunction with initial or duration
start	string		Attribute or entity id of a sensor that outputs a start time, MUST be used in conjunction with end or duration
end	string		Attribute or entity id of a sensor that outputs an end time, MUST be used in conjunction with start or duration

CSS Color Variables

You can pass a CSS color variable to the color option so long as you prefix it with --

There are a number of CSS color variables available in Home Assistant out of the box, such as:

• --primary-color
• --warning-color
• --error-color

Your Home Assistant theme may also provide additional CSS variables.

Examples

Battery meter anchored to bottom edge:

type: tile
entity: binary_sensor.kitchen_sink_leak
features:
  - type: custom:progress-bar-feature
    entity: sensor.kitchen_sink_leak_battery_level
    color: meter
    position: bottom

Battery meter anchored to top edge with no background color:

type: tile
entity: binary_sensor.kitchen_sink_leak
features:
  - type: custom:progress-bar-feature
    entity: sensor.kitchen_sink_leak_battery_level
    color: meter
    background: none
    position: top

Semi-transparent custom background color from a variable, different from the color value:

type: tile
entity: binary_sensor.closet_motion
features:
  - type: custom:progress-bar-feature
    entity: sensor.closet_motion_battery_level
    color: --error-color
    background: hsla(from var(--warning-color) h s l / .2)

Cover position from attribute:

type: tile
entity: cover.bedroom_window
features:
  - type: cover-open-close
  - type: custom:progress-bar-feature
    attribute: current_position
    inverse: true

Time based machine cycle progress

type: tile
entity: sensor.dryer
features:
  - type: custom:progress-bar-feature
    position: bottom
    time:
      initial: initial_time
      remaining: remain_time

OR

type: tile
entity: sensor.dryer
features:
  - type: custom:progress-bar-feature
    position: bottom
    time:
      start: start_time
      end: end_time

TODO

• Template value support
• Visual editor
• More progress bar positioning (left, right, around the card border)
• Time value support