[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\tconst now = new Date();\n    const endTime = new Date(hass.states['timer.help_house_testtimer'].attributes.finishes_at); \n    const runningTime = Math.round((endTime - now)/1000);\n    const maxtime = Math.round(new Date(\"1970-01-01 \"+hass.states['timer.help_house_testtimer'].attributes.duration+\" UTC\")/1000);\n    const remainingTime = Math.round(new Date(\"1970-01-01 \"+hass.states['timer.help_house_testtimer'].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  \tconst now = new Date(); \n  \ttry {\n      \tconst endTime = new Date(hass.states['timer.help_house_testtimer'].attributes.finishes_at); \n  \t\tconst runningTime = Math.round((endTime - now)/1000);\n          const maxtime = Math.round(new Date(\"1970-01-01 \"+hass.states['timer.help_house_testtimer'].attributes.duration+\" UTC\")/1000);\n          const percentage = 100-Math.round( 100.0 * runningTime / maxtime);\n          if(isNaN(runningTime) && hass.states['timer.help_house_testtimer'].state !='paused')\n            {card.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.duration;}\n            else if(hass.states['timer.help_house_testtimer'].state==='paused')\n            {card.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.remaining;}\n            else\n            {card.querySelector('.bubble-state').innerText = runningTime;}\n  \t} \n  \tcatch (error) { \n  \t\tcard.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.duration;}\n  })()}\n\n  ${subButtonIcon[0].setAttribute(\"icon\",\n  hass.states['timer.help_house_testtimer'].state != 'active' ?\n  'mdi:play' : 'mdi:replay')}\n  \n${(() => {if(hass.states['timer.help_house_testtimer'].state != 'active'){card.querySelector('.bubble-sub-button-2').classList.add(\"hidden\")}})()}\n${(() => {if(hass.states['timer.help_house_testtimer'].state === 'idle'){card.querySelector('.bubble-sub-button-3').classList.add(\"hidden\")}})()}\n${(() => {if(hass.states['timer.help_house_testtimer'].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: ${(() => {
	const now = new Date();
    const endTime = new Date(hass.states['timer.help_house_testtimer'].attributes.finishes_at); 
    const runningTime = Math.round((endTime - now)/1000);
    const maxtime = Math.round(new Date("1970-01-01 "+hass.states['timer.help_house_testtimer'].attributes.duration+" UTC")/1000);
    const remainingTime = Math.round(new Date("1970-01-01 "+hass.states['timer.help_house_testtimer'].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
  ${(() => {
  	const now = new Date(); 
  	try {
      	const endTime = new Date(hass.states['timer.help_house_testtimer'].attributes.finishes_at); 
  		const runningTime = Math.round((endTime - now)/1000);
          const maxtime = Math.round(new Date("1970-01-01 "+hass.states['timer.help_house_testtimer'].attributes.duration+" UTC")/1000);
          const percentage = 100-Math.round( 100.0 * runningTime / maxtime);
          if(isNaN(runningTime) && hass.states['timer.help_house_testtimer'].state !='paused')
            {card.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.duration;}
            else if(hass.states['timer.help_house_testtimer'].state==='paused')
            {card.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.remaining;}
            else
            {card.querySelector('.bubble-state').innerText = runningTime;}
  	} 
  	catch (error) { 
  		card.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.duration;}
  })()}

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

Extra Features:

• Radial progressbar
• All Timer actions

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

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

[brussene]

Great, thanks for sharing! I will give that a try.
That answers my question here Display a timer entity remaining time #875

[MrBearPresident]

Happy to be of service.

[leap-it]

This is cool for some reason my remaining duration only show secondes like 20 minutes will show 1200 how do i format to mm:ss ?
thanks

[MrBearPresident]

Replace the code responsible for the state-text (just after #Place all the DOM changing stuff on the bottom) with the following:

  ${(() => {
  	const now = new Date(); 
  	try {
      	const endTime = new Date(hass.states['timer.help_house_testtimer'].attributes.finishes_at); 
  		const runningTime = Math.round((endTime - now)/1000);
        const minutes = Math.floor(runningTime / 60);
        const remainingSeconds = runningTime % 60;
        const maxtime = Math.round(new Date("1970-01-01 "+hass.states['timer.help_house_testtimer'].attributes.duration+" UTC")/1000);
        const percentage = 100-Math.round( 100.0 * runningTime / maxtime);
        if(isNaN(runningTime) && hass.states['timer.help_house_testtimer'].state !='paused')
            {card.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.duration;}
          else if(hass.states['timer.help_house_testtimer'].state==='paused')
            {card.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.remaining;}
          else
            {card.querySelector('.bubble-state').innerText = minutes + ":" + ("0" + remainingSeconds).slice(-2) ;}
  	} 
  	catch (error) { 
  		card.querySelector('.bubble-state').innerText = hass.states['timer.help_house_testtimer'].attributes.duration;}
  })()}

Now it will do mm:ss. If you want hh:mm:ss, then you'll have to add some different math.

[leap-it]

wow thanks alot for the quick reply. all working good.