[Example] Timer-cards with round progressbar.

[MrBearPresident]

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
styles: ":host{\n  --circle-color: var(--bubble-accent-color, var(--accent-color));\n  --percentage: ${(() => {\n    timerEntity = hass.states['timer.help_house_testtimer'];\n    const now = new Date();\n    const endTime = new Date(timerEntity.attributes.finishes_at); \n    const runningTime = Math.round((endTime - now)/1000);\n    const maxtime = Math.round(new Date(\"1970-01-01 \"+ timerEntity.attributes.duration+\" UTC\")/1000);\n    const remainingTime = Math.round(new Date(\"1970-01-01 \"+ timerEntity.attributes.remaining+\" UTC\")/1000);\n    var percentage = 0;\n    \n    if(isNaN(runningTime))\n      {percentage = 100-Math.round( 100.0 * remainingTime / maxtime);}\n      else\n      {percentage = 100-Math.round( 100.0 * runningTime / maxtime);}\n    \n    if(isNaN(percentage))\n      {return \"0%\";}\n      else\n      {return \"\" + percentage +\"%\";}     \n  })()};\n}\n\n\n.bubble-icon-container {\n  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;\n}\n.bubble-icon-container:after {\n  content: \"\" !important;\n  height: 100% !important;\n  width: 100% !important;\n  position: absolute !important;\n  border-radius: 50% !important;\n  background: (var(--bubble-button-icon-background-color), 0.1) !important;\n}\n\n\n#Place all the DOM changing stuff on the bottom\n  ${(() => {\n    if(!card.timer){\n      card.timer = setInterval(\n       () => {\n\t\t\t\tlet now = new Date(); \n\t\t\t\ttry {\n\t\t\t\t\tlet endTime = new Date(timerEntity.attributes.finishes_at); \n\t\t\t\t    let runningTime = Math.round((endTime - now)/1000);\n\t\t\t\t\tlet minutes = Math.floor(runningTime / 60);\n\t\t\t\t\tlet remainingSeconds = runningTime % 60;\n\t\t\t\t\tif(isNaN(runningTime) && timerEntity.state !='paused')\n\t\t\t\t\t\t {card.querySelector('.bubble-state').innerText = timerEntity.attributes.duration;}\n\t\t\t\t\t\telse if(timerEntity.state==='paused')\n\t\t\t\t\t\t {card.querySelector('.bubble-state').innerText = timerEntity.attributes.remaining;}\n                         \n\t\t\t\t\t\telse\n\t\t\t\t\t\t{card.querySelector('.bubble-state').innerText = minutes + \":\" + (\"0\" + remainingSeconds).slice(-2) ;}\n\t\t\t\t} \n\t\t\t\tcatch (error) { \n\t\t\t\t\tcard.querySelector('.bubble-state').innerText = timerEntity.attributes.duration;}\n\t\t\t\t}\n\t\t\t\t\n      , 500);\n    }\n   }\t\n  )()}\n\n\n  ${subButtonIcon[0].setAttribute(\"icon\",timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay')}\n  \n  ${(() => {if(timerEntity.state != 'active'){card.querySelector('.bubble-sub-button-2').classList.add(\"hidden\")}})()}\n  ${(() => {if(timerEntity.state === 'idle'){card.querySelector('.bubble-sub-button-3').classList.add(\"hidden\")}})()}\n  ${(() => {if(timerEntity.state === 'idle'){card.querySelector('.bubble-sub-button-4').classList.add(\"hidden\")}})()}"
card_layout: large

Only the style element:

:host{
  --circle-color: var(--bubble-accent-color, var(--accent-color));
  --percentage: ${(() => {
    timerEntity = hass.states['timer.help_house_testtimer'];
    const now = new Date();
    const endTime = new Date(timerEntity.attributes.finishes_at); 
    const runningTime = Math.round((endTime - now)/1000);
    const maxtime = Math.round(new Date("1970-01-01 "+ timerEntity.attributes.duration+" UTC")/1000);
    const remainingTime = Math.round(new Date("1970-01-01 "+ 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;
}


#Place all the DOM changing stuff on the bottom
  ${(() => {
    if(!card.timer){
      card.timer = setInterval(
       () => {
				let now = new Date(); 
				try {
					let endTime = new Date(timerEntity.attributes.finishes_at); 
				    let runningTime = Math.round((endTime - now)/1000);
					let minutes = Math.floor(runningTime / 60);
					let remainingSeconds = runningTime % 60;
					if(isNaN(runningTime) && timerEntity.state !='paused')
						 {card.querySelector('.bubble-state').innerText = timerEntity.attributes.duration;}
						else if(timerEntity.state==='paused')
						 {card.querySelector('.bubble-state').innerText = timerEntity.attributes.remaining;}
                         
						else
						{card.querySelector('.bubble-state').innerText = minutes + ":" + ("0" + remainingSeconds).slice(-2) ;}
				} 
				catch (error) { 
					card.querySelector('.bubble-state').innerText = timerEntity.attributes.duration;}
				}
				
      , 500);
    }
   }	
  )()}


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

Extra Features:

• Radial progressbar
• All Timer actions

Code for timers in sub-button below

Disclamer: I did not make this round progressbar, but revised what @tschock posted onreddit.

• https://www.reddit.com/r/BubbleCard/comments/1g6058q/radial_gradient_around_icon/

Edits

• Change to timer event + Make the representation like "mm:ss".
• Updated gif
• added timers in sub-buttons

[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
    
   }	
  )()}

[nagtegaal]

This isn't cross-browser either. On MacOS it doesn't display the radia-thing on Safari or the Companion app.
On Chrome it does display, although the sides of the (growing) radial bar around the icon is far from sharp and crispy. Not sure why that is though. Any idea?

[bajijasti]

Hi, Would you be able help me convert this concept for Phone charging status? Like if phone is charging, fill the round with a colour say green as it is charging and when phone is discharging, reduce the colour with red. Is it possible?

[MrBearPresident]

Because its made out of 3 pixels. Or do you mean the gif I placed on github?

[nagtegaal]

Both...

[MrBearPresident]

• .gif on github => because of compression.
• On my browser it does not look pixelish. onedrive link (no way of showing you through github)

[nagtegaal]

Because its made out of 3 pixels. Or do you mean the gif I placed on github?
I've red the CSS to understand this and try. to make this cross-browser, but I am unable to see where those 3px is determined.

Is it this line of code (which has a double ";" btw), where it states the 3%, which equals the 3px? :
background: conic-gradient(white 3% 0%, transparent 0% 100%);;

[MrBearPresident]

Nope it is this: height: calc(100% - 6px); you also have the equivalent for width.

(which has a double ";" btw),

Thanks I cleaned that up.