UPDATE (1/9): @Bram_Kragten has updated the card to use lit (to improve performance). It is also significantly easy to get started with. Please follow the link here for instructions.

UPDATE (7/3): Thanks to @ciotlosm for all his inputs to get the card fixed. We now have a significantly better version of the custom animated card that provides the same output, but is less “hacky”. To configure the card:

Place the weather-card.js and weather-card.css files in www\custom_ui\ . Save, the amcharts icon under www\icons\weather_icons\animated Add the following to your ui-lovelace.yaml .

resources: - url: /local/custom_ui/weather-card.js type: js title: Home Assistant views: - icon: mdi:weather-cloudy id: weather title: Weather garage_door_tilt_sensor_alarm_level: Weather cards: - type: "custom:weather-card" entity_weather: weather.yweather entity_sun: sun.sun

Any inputs are more than welcome.

Old instructions (can be ignored)

The custom weather card in this thread is perfect for my needs, but, unfortunately does not work with Lovelace. I modified the same to make it work with Lovelace (0.73.0b0) - all credits go to the authors of the original code.

To implement the card:

Add the custom-weather-animated.html file to www\custom_ui\custom-weather-animated.html . Save, the amcharts icon under www\icons\weather_icons\animated Import the files in frontend using: frontend: extra_html_url: - /local/custom_ui/custom-weather-animated.html extra_html_url_es5: - /local/custom_ui/custom-weather-animated.html Add an input_boolean entity that we will use. I added input_boolean.weather . Customize the input_boolean entity that you created in the last step to add the weather details. Note, that you will need Yahoo weather configured and use the Yahoo weather entity, which in my case is weather.yweather . customize: input_boolean.weather: config: weather: weather.yweather sun: sun.sun Add the animated card to Lovelace: cards: - type: 'custom:custom-weather-animated' entity: input_boolean.weather

Restart HA and make sure to clear the browser cache (CTRL+SHIFT+R) and you should see the card. Check the logs if things don’t go as expected.

I am not a Polymer/UI expert and I am sure things can be improved. I am creating this thread so that we can improve upon things and keep it updated as Lovelace matures.