cool, and yp does the trick, (had to replace the lovelace_gen and add some actions and showing:)
must check circumference (not working at all…) but hey, this is a good start 
thanks!
followup
edited it to my settings elsewhere, and cleaned the code up a bit, but still no circular indication of the timer, all else works as expected. I guess something is wrong with the template, but I can not debug that.
could anyone with a keen eye please have a look what I missed:
custom_fields:
info: |
[[[
if (entity.state === 'active') {
var start_time = new Date();
var end_time = new Date(entity.attributes.finishes_at);
var duration = new Date('1970-01-01T0' + entity.attributes.duration + 'z');
duration = Math.floor(duration.getTime() / 1000);
var remaining_time = Math.floor((end_time.getTime() - start_time.getTime()) / 1000);
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}"
stroke="var(--active-color)" stroke-width=2 fill="none" stroke-linecap="round"
style="transform: rotate(-90deg);transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - remaining_time / duration * circumference};"/>
<text x="50%" y="54%" fill="red" font-weight="bold" font-size="12" text-anchor="middle" alignment-baseline="middle">
${"Active"}
</text>
</svg>
`;
}
]]]
state:
- value: active
icon: mdi:timer-sand
spin: true
styles:
card:
- box-shadow: 0px 0px 2px 1px var(--paper-item-icon-color)
- animation: wiggle 0.16s 6
name:
- color: white
state:
- color: gray
label:
- display: none
icon:
- transition: all 2s ease
edit
right, so it was simple… and it suddenly showed fine using
stroke-dashoffset: ${circumference - (remaining_time/duration * circumference)}
dont / and * take precedence over - by default?
then again, changing views and getting back a minute later: full circle again. What is this?