Simple Card animation

[RayMatrix]

I have used 'card-mod' and this code at the end of the original card code:

`card_mod:
style: |
/* Der Container des Icons */
.icon-container {
position: relative;
overflow: visible !important;
border-radius: 50% !important;
background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Der rotierende Ring */
.icon-container::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  /* Blaue Linie oben */
  border-top: 2px solid rgb(33, 150, 243) !important;
  
  /* Animation nur wenn der Status 'running' ist */
  {% if is_state('sensor.waschmaschine_state', 'running') %}
    animation: spin 1.5s linear infinite !important;
    display: block;
  {% else %}
    display: none;
  {% endif %}
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}`

Note: Remember to adjust the sensor entry to your configuration!

You'll then get an animation—in my example, a line that moves in a circle around the icon.

Have fun with it!

[HellStormBeast]

Hi! Das scheint bei mir so nicht zu funktionieren:

[RayMatrix]

Ich hab leider keine Idee warum der Editor hier nicht korrekt formatiert.
Daher hab ich den Code hier in eine Datei gepackt.
card_mod.yaml