[Example] Timer-cards with round progressbar.

[MrBearPresident]

YAML

type: custom:bubble-card
card_type: button
button_type: state
entity: timer.help_house_testtimer
sub_button:
  - entity: timer.help_house_testtimer
    tap_action:
      action: call-service
      service: timer.start
      target:
        entity_id: timer.help_house_testtimer
    icon: mdi:play
  - entity: timer.help_house_testtimer
    icon: mdi:pause
    tap_action:
      action: call-service
      service: timer.pause
      target:
        entity_id: timer.help_house_testtimer
  - entity: timer.help_house_testtimer
    icon: mdi:cancel
    tap_action:
      action: call-service
      target:
        entity_id: timer.help_house_testtimer
      service: timer.cancel
  - entity: timer.help_house_testtimer
    tap_action:
      action: call-service
      service: timer.finish
      target:
        entity_id: timer.help_house_testtimer
    icon: mdi:clock-end
show_attribute: false
show_state: true
show_name: true
<force_icon: false
show_icon: true
show_last_changed: false
card_layout: large
styles: |
  :host{
    --circle-color: var(--bubble-accent-color, var(--accent-color));
    --percentage: ${(() => {
      card.timerEntity = hass.states[entity];
      const now = new Date();
      const endTime = new Date(card.timerEntity.attributes.finishes_at); 
      const runningTime = Math.round((endTime - now) / 1000);
      const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
      const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);

      var percentage = 0;
      if (isNaN(runningTime)) {
        percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
      } else {
        percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
      }
      
      if (isNaN(percentage)) {
        return "0%";
      } else {
        return "" + percentage +"%";
      }
    })()};
  }
  .bubble-icon-container {
    background: radial-gradient(
        var(--card-background-color) 60%,
        transparent 0%
      ), conic-gradient(
        var(--circle-color) var(--percentage) 0%,
        var(--card-background-color) 0% 100%
      ) !important;
  }
  .bubble-icon-container:after {
    content: "" !important;
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
    border-radius: 50% !important;
    background: (var(--bubble-button-icon-background-color), 0.1) !important;
  }
  ${(() => {
    function UpdateState(){
      try {
            let now = new Date(); 
            let endTime = new Date(card.timerEntity.attributes.finishes_at); 
            let runningTime = Math.round((endTime - now)/1000);
            let hours = Math.floor(runningTime / 3600);
            let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
            let remainingSeconds = runningTime % 60;
            
            card.querySelector('.bubble-state').innerText =
                (hours > 0 ? (hours + ":") : "") +
                ("0" + minutes).slice(-2) + ":" +
                ("0" + remainingSeconds).slice(-2);

          } catch (error) {
            card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
          }
    };
    
    if (card.timer == null && card.timerEntity.state === 'active') {
      card.timer = setInterval(()=>{UpdateState()}, 500);
    }else if (card.timerEntity.state != 'active'){
      clearInterval(card.timer);
      card.timer = null;
      if (card.timerEntity.state !='paused') {
          card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
        } else if(card.timerEntity.state==='paused') {
          card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
      }
    }
  })()}

  ${(() => {
    subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
  })()}
  ${(() => {
    if (card.timerEntity.state != 'active') {
      card.querySelector('.bubble-sub-button-2').classList.add("hidden");
    }
  })()}
  ${(() => {
    if (card.timerEntity.state === 'idle') {
      card.querySelector('.bubble-sub-button-3').classList.add("hidden");
    }
  })()}
  ${(() => {
    if (card.timerEntity.state === 'idle') {
      card.querySelector('.bubble-sub-button-4').classList.add("hidden");
    }
  })()}

Only the style element

:host{
  --circle-color: var(--bubble-accent-color, var(--accent-color));
  --percentage: ${(() => {
    card.timerEntity = hass.states[entity];
    const now = new Date();
    const endTime = new Date(card.timerEntity.attributes.finishes_at); 
    const runningTime = Math.round((endTime - now) / 1000);
    const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
    const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);

    var percentage = 0;
    if (isNaN(runningTime)) {
      percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
    } else {
      percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
    }
    
    if (isNaN(percentage)) {
      return "0%";
    } else {
      return "" + percentage +"%";
    }
  })()};
}
.bubble-icon-container {
  background: radial-gradient(
      var(--card-background-color) 60%,
      transparent 0%
    ), conic-gradient(
      var(--circle-color) var(--percentage) 0%,
      var(--card-background-color) 0% 100%
    ) !important;
}
.bubble-icon-container:after {
  content: "" !important;
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  border-radius: 50% !important;
  background: (var(--bubble-button-icon-background-color), 0.1) !important;
}
${(() => {
  function UpdateState(){
    try {
          let now = new Date(); 
          let endTime = new Date(card.timerEntity.attributes.finishes_at); 
          let runningTime = Math.round((endTime - now)/1000);
          let hours = Math.floor(runningTime / 3600);
          let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
          let remainingSeconds = runningTime % 60;
          
          card.querySelector('.bubble-state').innerText =
              (hours > 0 ? (hours + ":") : "") +
              ("0" + minutes).slice(-2) + ":" +
              ("0" + remainingSeconds).slice(-2);

        } catch (error) {
          card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
        }
  };
  
  if (card.timer == null && card.timerEntity.state === 'active') {
    card.timer = setInterval(()=>{UpdateState()}, 500);
  }else if (card.timerEntity.state != 'active'){
    clearInterval(card.timer);
    card.timer = null;
    if (card.timerEntity.state !='paused') {
        card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
      } else if(card.timerEntity.state==='paused') {
        card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
    }
  }
})()}

${(() => {
  subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
})()}
${(() => {
  if (card.timerEntity.state != 'active') {
    card.querySelector('.bubble-sub-button-2').classList.add("hidden");
  }
})()}
${(() => {
  if (card.timerEntity.state === 'idle') {
    card.querySelector('.bubble-sub-button-3').classList.add("hidden");
  }
})()}
${(() => {
  if (card.timerEntity.state === 'idle') {
    card.querySelector('.bubble-sub-button-4').classList.add("hidden");
  }
})()}

Extra Features:

• Radial progress bar
• All Timer actions

Code for timers in sub-button below

Code for round progress bar for batteries Below

Disclamers/Thank you

• I did not make this round progress bar, but revised what @tschock posted on reddit
• Thanks to @nagtegaal for his suggestions
• Thanks to @marcuscps for his suggestions

Edits

• Change to timer event + Make the representation like "mm:ss".
• Updated gif
• Added timers in sub-buttons
• Used Entity as default entity

[MrBearPresident]

For Subbuttons use this code in the style part

---

This is for sub-button 1

#Place all the DOM changing stuff on the bottom
  ${(() => {
    //Getting the timer-data from hass and saving as local variable.
    timerEntity = hass.states['timer.help_house_testtimer'];
    //Setting up a Global var that saves the result.
    try {timerResult = timerResult;}
    catch {timerResult = "";}
    if(!card.timer){
      card.timer = setInterval(
       () => {
               //Saving the now as a Date variable so we can calculate the difference 
				let now = new Date();
               //Preparing the result 
               let result ="";
				try {
					let endTime = new Date(timerEntity.attributes.finishes_at);  //Taking endtime from timer-entity and making a date-time from it  
      				let runningTime = Math.round((endTime - now)/1000);          //Calculating the difference
					let minutes = Math.floor(runningTime / 60);                  //Distilling the minutes from it
					let remainingSeconds = runningTime % 60;                     //Save the rest as seconds
					if(isNaN(runningTime) && timerEntity.state !='paused')
						 {result= timerEntity.attributes.duration;}              //if not running and not paused show initial value
						else if(timerEntity.state==='paused')
						 {result= timerEntity.attributes.remaining;}             //if paused show remaining value
						else
						 {result = minutes + ":" + ("0" + remainingSeconds).slice(-2) ;}   //if running show remaining seconds
				} 
				catch (error) {result = timerEntity.attributes.duration;}        //if something went wrong show initial value
               
               card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container').innerText = result; //writing to the sub-button
               timerResult = result;                                           // Writing to global var
                }
				
      , 500);
    }
	card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container').innerText = timerResult; //writing global var to Sub-button
    
   }	
  )()}

[marcuscps]

Disclaimer: I may have understood something wrong here as I'm not very experienced with this syntax. So bare with me.

When we evaluate the lambda functions, it runs just like if the JS code was pasted in the console, so in global scope.
This way, if you have more than 1 instance of such button, you'd be overwriting timerEntity (a global variable).

I believe this addresses the issue (card.timerEntity instead of timerEntity):

      styles: |
        :host{
          --circle-color: var(--bubble-accent-color, var(--accent-color));
          --percentage: ${(() => {
            card.timerEntity = hass.states[entity];
            const now = new Date();
            const endTime = new Date(card.timerEntity.attributes.finishes_at); 
            const runningTime = Math.round((endTime - now) / 1000);
            const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
            const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);

            var percentage = 0;
            if (isNaN(runningTime)) {
              percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
            } else {
              percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
            }
            
            if (isNaN(percentage)) {
              return "0%";
            } else {
              return "" + percentage +"%";
            }
          })()};
        }
        .bubble-icon-container {
          background: radial-gradient(
              var(--card-background-color) 60%,
              transparent 0%
            ), conic-gradient(
              var(--circle-color) var(--percentage) 0%,
              var(--card-background-color) 0% 100%
            ) !important;
        }
        .bubble-icon-container:after {
          content: "" !important;
          height: 100% !important;
          width: 100% !important;
          position: absolute !important;
          border-radius: 50% !important;
          background: (var(--bubble-button-icon-background-color), 0.1) !important;
        }
        ${(() => {
          if (card.timer == null) {
            card.timer = setInterval(
              () => {
                try {
                  let now = new Date(); 
                  let endTime = new Date(card.timerEntity.attributes.finishes_at); 
                  let runningTime = Math.round((endTime - now)/1000);
                  let hours = Math.floor(runningTime / 3600);
                  let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
                  let remainingSeconds = runningTime % 60;
                  
                  if (isNaN(runningTime) && card.timerEntity.state !='paused') {
                    card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
                  } else if(card.timerEntity.state==='paused') {
                    card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
                  } else {
                    card.querySelector('.bubble-state').innerText =
                      (hours > 0 ? (hours + ":") : "") +
                      ("0" + minutes).slice(-2) + ":" +
                      ("0" + remainingSeconds).slice(-2);
                  }
                } catch (error) {
                  card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
                }
              }, 500
            );
          }
        })()}

        ${(() => {
          subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
        })()}
        ${(() => {
          if (card.timerEntity.state != 'active') {
            card.querySelector('.bubble-sub-button-2').classList.add("hidden");
          }
        })()}
        ${(() => {
          if (card.timerEntity.state === 'idle') {
            card.querySelector('.bubble-sub-button-3').classList.add("hidden");
          }
        })()}
        ${(() => {
          if (card.timerEntity.state === 'idle') {
            card.querySelector('.bubble-sub-button-4').classList.add("hidden");
          }
        })()}

Other improvements:

• shows hours when > 1.
• More generic code card.timerEntity = hass.states[entity];. By referencing it this way, it is easier to reuse code (decluttering-card, or similar).

I thought it would be possible to disable the timer when idle, but it seems I got it wrong.
I'd love understand a bit better how styles is interpreted.

This code will never stop the interval, even when navigating away to a different dashboard. I'd love to fix it.

[MrBearPresident]

This is indeed much better
I've updated the example.

[MrBearPresident]

This code will never stop the interval, even when navigating away to a different dashboard. I'd love to fix it.

Forgot to tell but this is handled now.