https://github.com/ytilis/hass-progress-bar-feature
Add a progress bar border to HASS cards
https://github.com/ytilis/hass-progress-bar-feature
card-feature hacs hacs-plugin home-assistant lovelace
Last synced: about 1 month ago
JSON representation
Add a progress bar border to HASS cards
- Host: GitHub
- URL: https://github.com/ytilis/hass-progress-bar-feature
- Owner: ytilis
- License: mit
- Created: 2024-11-26T17:30:29.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-10T01:35:12.000Z (5 months ago)
- Last Synced: 2025-02-08T12:46:22.510Z (3 months ago)
- Topics: card-feature, hacs, hacs-plugin, home-assistant, lovelace
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HASS Progress Bar Feature
[](https://github.com/hacs/integration)
[](https://github.com/ytilis/hass-progress-bar-feature/releases)
[](https://github.com/ytilis/hass-progress-bar-feature/releases)
[](https://github.com/ytilis/hass-progress-bar-feature/commits/master)
[](https://github.com/ytilis/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-object-options) | | 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](#css-color-variables), 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](#css-color-variables)
### 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)
- [x] Time value support