Merci pour cette card, j’aime beaucoup
J’essaie de l’adapter et de changer l’animation par le loader du cercle (loader-1)
Mais je bloque, d’ou vient mon erreur ?
name: Sonorisation
show_name: true
icon: mdi:speaker
styles:
custom_fields:
wave:
- background-color: rgba(0, 0, 0, 0)
- position: absolute
- right: 5%
- top: 5%
- font-size: 13px
- line-height: 20px
- display: |
[[[
if (states["binary_sensor.home_assistant_versions_update_available"].state == 'on') return '';
else return 'none';
]]]
- '--icon-color': |
[[[
if (states["binary_sensor.home_assistant_versions_update_available"].state == 'on') return 'var(--mail-color)';
else return 'var(--primary-color)';
]]]
card:
- border: 2px solid var(--primary-color)
- border-radius: 10px
icon:
- color: var(--primary-color)
name:
- font-variant: small-caps
- color: var(--primary-color)
custom_fields:
wave: |
[[[
return `
<div class="loader-container">
<div class="loader-1">
</div>
</div>`
]]]
type: custom:button-card
style: |
.loader-1 {
width: 50px;
height: 50px;
.loader-1:before {
content: '';
width: 25px;
height: 25px;
position: absolute;
top: 0;
left: 0;
background: #ffffff;
border-radius: 100% 0 0 0;
}
.loader-1:after {
content: '';
width: 40px;
height: 40px;
border-radius: 50%;
background: #ff8000;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes loader-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}