Make the charge bar in a tile card pulse (fade in-and-out) while charging.
Install the absolutely awesome “Custom Features for Home Assistant Cards”. Then:
- Add a “custom features row” for the battery state
- Add a “slider” that is based on the battery percentage
- Edit the slider to have the Interaction be “Nothing” (you only want this to show the value, not change it)
- Edit the Appearance to be “Flat” (so it doesn’t look like a control)
- Edit the Appearance CSS to have the following code for animating the bar based on whether it is charging. (I use the “sensor.car_charger_power” but you could also use a “binary_sensor.is_charing” or anything else.)
@property --color {
syntax: '<color>';
inherits: true;
initial-value: orange;
}
@keyframes pulse-color {
from { filter: brightness(110%); }
to { filter: brightness(70%); }
}
:host {
{% if states("sensor.car_charger_power")|float(0.0)>10.0 %}
animation: pulse-color 2s linear(0, 0.25, 1) infinite alternate;
{% endif %}
}
Now when the charging is active (sensor.car_charger_power > 10.0) the charge bar will pulse brighter and darker to show you it is charging. Subtle but gratifying.
-David