Ich habe das mal in einer Bubble-Card umgesetzt.
Das sieht dann so aus und ist sicher noch optimierbar … ich arbeite dran 
edit: gerade noch einen Fehler entdeckt … Gesamtlaufzeit (linker Sub-Button) hat Fehler im Template 
falls Interesse besteht … hier der Code:
type: custom:bubble-card
card_type: button
button_type: slider
name: Waschmaschine
show_icon: true
sub_button:
main: []
bottom:
- entity: sensor.waschmaschine_gesamtdauer_2
show_state: true
show_background: false
show_icon: true
tap_action:
action: none
visibility:
- condition: state
entity: sensor.waschmaschine_zustand
state_not: "off"
- condition: state
entity: sensor.waschmaschine_zustand
state_not: unavailable
show_name: false
hide_when_parent_unavailable: false
show_attribute: false
attribute: icon
name: Dauer
scrolling_effect: false
content_layout: icon-top
- entity: sensor.waschmaschine_verstrichene_zeit_2
show_state: true
show_background: false
show_icon: true
tap_action:
action: none
visibility:
- condition: state
entity: sensor.waschmaschine_zustand
state_not: "off"
- condition: state
entity: sensor.waschmaschine_zustand
state_not: unavailable
show_name: false
hide_when_parent_unavailable: false
show_attribute: false
attribute: icon
name: Verstrichen
scrolling_effect: false
content_layout: icon-top
- entity: sensor.waschmaschine_verbleibende_zeit
show_state: true
show_background: false
show_icon: true
tap_action:
action: none
visibility:
- condition: state
entity: sensor.waschmaschine_zustand
state_not: "off"
- condition: state
entity: sensor.waschmaschine_zustand
state_not: unavailable
show_name: false
hide_when_parent_unavailable: false
show_attribute: false
attribute: icon
name: Verbleibend
scrolling_effect: false
content_layout: icon-top
- entity: sensor.waschmaschine_fortschritt
show_state: true
show_background: false
show_icon: true
tap_action:
action: none
visibility:
- condition: state
entity: sensor.waschmaschine_zustand
state_not: "off"
- condition: state
entity: sensor.waschmaschine_zustand
state_not: unavailable
show_name: false
hide_when_parent_unavailable: false
show_attribute: false
attribute: icon
name: Fortschritt
scrolling_effect: false
content_layout: icon-top
- entity: sensor.waschmaschine_zustand
show_state: true
show_background: false
show_icon: false
tap_action:
action: none
visibility:
- condition: state
entity: sensor.waschmaschine_zustand
state: "off"
show_name: false
hide_when_parent_unavailable: false
show_attribute: false
attribute: icon
name: Zustand
scrolling_effect: false
content_layout: icon-top
entity: sensor.waschmaschine_fortschritt
min_value: 0
max_value: 100
card_layout: large
grid_options:
columns: 10
rows: 2
styles: |-
.bubble-container {
--bubble-border-radius: 0px !important;
--bubble-backdrop-filter: blur(5.1px);
-webkit-backdrop-filter: blur(5.1px);
backdrop-filter: blur(5px);
overlay-backdrop-opacity: 1;
overlay-backdrop-background-color: rgba(0, 0, 0, 0.32);
transition: all 150ms ease-in-out;
box-shadow: rgba(255, 255, 255, 0.05) 0 0 1px 1px inset;
background: rgba(7, 189, 223, 0.15);
background-image: linear-gradient(180deg, rgba(206, 211, 234, 0.07) 0%, transparent 100%);
}
.bubble-name-container {
position: absolute !important;
height: 100% !important;
width: 100% !important;
align-items: center;
text-ailgn: center;
top: 20%;
left: -5px;
}
.bubble-icon-container {
position: absolute !important;
background-color: transparent !important;
height: 100% !important;
width: 100% !important;
align-content: start;
top: 10%;
left: -8px;
}
.bubble-icon {
color: white !important;
}
.bubble-range-fill {
background: linear-gradient(145deg,rgba(7, 189, 223, 0.1) 0%, rgba(0, 158, 3, 0.7) 100%); !important;
opacity: 1 !important;
}
.bubble-name {
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
justify-content: center !important;
text-align: center;
}
.bubble-state {
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
justify-content: center !important;
text-align: center;
}
.bubble-button-card {
display: grid;
grid-template-areas:
'i1 i i2'
'n1 n n2'
's s s';
grid-template-columns: auto 90% auto;
grid-template-rows: 1fr 2fr 1fr;
justify-items: center;
}
.bubble-icon-container {
grid-area: i;
justify-self: center;
left: -5px;
background-color: transparent !important;
}
.bubble-name-container {
grid-area: n;
justify-self: center;
align-self: center;
justify-content: center;
align-content: center;
justify-items: center;
left: 0;
top: -10px;
}
.bubble-sub-button-bottom-container {
grid-area: s;
top: -15px !important;
}
.bubble-sub-button {
background: transparent !important;
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
margin-bottom: 5px;
}
rows: 1.469
show_name: true
show_state: false
icon: mdi:washing-machine
show_attribute: true
tap_action:
action: none
double_tap_action:
action: none
button_action:
tap_action:
action: none
double_tap_action:
action: none