Animated Humidity Wave Style Card

[hiSweid]

Here you got a animatied wave card with horizontal gauge. the layout of icon and text is also edited. it can be used for humidity or water tank or anything else ;)

Please use a large card layout under styling:

and also a 3 by 2layout:

I am not good at programming but with the help of chatgpt and trail and error i got the style that i want, i also have many other cards modded with animation

.bubble-container {
    border-radius: 15px !important;
}

.bubble-container::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400%;
    height: calc(${Math.max(1, Math.min(100, state))}% + 10px);
    background: #1E88E5AA;
    clip-path: path("M 0 20 Q 10 10, 20 20 T 40 20 T 60 20 T 80 20 T 100 20 T 120 20 T 140 20 T 160 20 T 180 20 T 200 20 T 220 20 T 240 20 T 260 20 T 280 20 T 300 20 T 320 20 T 340 20 T 360 20 T 380 20 T 400 20 V120 H0 Z");
    animation: wave-animation 3s linear infinite;
}

@keyframes wave-animation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-80px); }
}

.bubble-icon-container {
    background: none;
    margin: 0px 0px 80px 0px;
}

.bubble-icon, bubble-name-container {
    #color: black !important;
}

.bubble-name-container {
    margin: 70px 5px 0 -40px;
    #color: black !important;
}

[tschenta]

doesn't work

[artpcpl]

Its work in Styling options -> Custom styles and JS templates.

[Clooos]

This is not a module, so it can't works this way 😅

[artpcpl]

True, I just browsed the modules and wrote without thinking, it works in Styling options -> Custom styles and JS templates.

[s1mpleman]

Thanks for this just added it to my hot water pop up!