[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

Tip

• Code for timers in sub-button Below
• Code for round progress bar for batteries with picture entity Below
• Code for round progressbar on sub-buttons Below

Note

• I did not make this round progress bar, but revised what @tschock [posted on reddit] (https://www.reddit.com/r/BubbleCard/comments/1g6058q/radial_gradient_around_icon/)
• 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
• Added round progressbars for sub-buttons

[MrBearPresident]

For timers in sub-button

This is for sub-button 1, place this code in the custom-style part.

Javascript

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

[MrBearPresident]

Example for progressbar on sub-button

yaml

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.resting_heart_rate
name: Charge 5
sub_button:
  - entity: sensor.tracker_steps
    state_background: false
  - entity: sensor.distance
    state_background: false
    icon: mdi:map-marker-path
  - entity: sensor.calories
    state_background: false
  - entity: sensor.sleep_minutes_asleep
    state_background: false
    icon: mdi:bed-clock
  - entity: sensor.sleep_efficiency
    state_background: false
  - entity: sensor.charge_5_battery_level
    state_background: false
card_layout: large
styles: |-
  :host{
      --color-ok-icon: green ;
      --color-warning-icon: orange ;
      --color-alert-icon: red ;
      --circle-color1: #36A1D3;
      --circle-color2: #36A1D3;
      --circle-color3: #36A1D3;
      --circle-color4:  ${hass.states['sensor.sleep_minutes_asleep'].state/5.05 > 80 ? 'var(--color-ok-icon)'
                     : hass.states['sensor.sleep_minutes_asleep'].state/5.05 > 65 ? 'var(--color-warning-icon)'
                     : 'var(--color-alert-icon)'} ;
      --circle-color5:  ${hass.states['sensor.sleep_efficiency'].state > 80 ? 'var(--color-ok-icon)'
                     : hass.states['sensor.sleep_efficiency'].state > 65 ? 'var(--color-warning-icon)'
                     : 'var(--color-alert-icon)'} ;
      --circle-color6:  ${hass.states['sensor.charge_5_battery_level'].state > 50 ? 'var(--color-ok-icon)'
                     : hass.states['sensor.charge_5_battery_level'].state > 20 ? 'var(--color-warning-icon)'
                     : 'var(--color-alert-icon)'} ;
      --percentage1: ${hass.states['sensor.tracker_steps'].state / 100}%;
      --percentage2: ${hass.states['sensor.distance'].state * 12.5}%;
      --percentage3: ${hass.states['sensor.calories'].state / 29}%;
      --percentage4: ${hass.states['sensor.sleep_minutes_asleep'].state/5.05}%;
      --percentage5: ${hass.states['sensor.sleep_efficiency'].state}%;
      --percentage6: ${hass.states['sensor.charge_5_battery_level'].state}%;
      --bubble-sub-button-border-radius: 50%;
    }

    *{
      .bubble-sub-button-1{
        background: radial-gradient(
            var(--card-background-color) 60%,
            transparent 0%
          ), conic-gradient(
            var(--circle-color1) var(--percentage1) 0%,
            var(--card-background-color) 0% 100%
          ) !important;
      }
      
      .bubble-sub-button-1: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;
      }
    }

    *{
      .bubble-sub-button-2{
        background: radial-gradient(
            var(--card-background-color) 60%,
            transparent 0%
          ), conic-gradient(
            var(--circle-color2) var(--percentage2) 0%,
            var(--card-background-color) 0% 100%
          ) !important;
      }
      
      .bubble-sub-button-2: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;
      }
    }

    *{
      .bubble-sub-button-3{
        background: radial-gradient(
            var(--card-background-color) 60%,
            transparent 0%
          ), conic-gradient(
            var(--circle-color3) var(--percentage3) 0%,
            var(--card-background-color) 0% 100%
          ) !important;
      }
      
      .bubble-sub-button-3: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;
      }
    }

    *{
      .bubble-sub-button-4{
        background: radial-gradient(
            var(--card-background-color) 60%,
            transparent 0%
          ), conic-gradient(
            var(--circle-color4) var(--percentage4) 0%,
            var(--card-background-color) 0% 100%
          ) !important;
      }
      
      .bubble-sub-button-4: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;
      }
      
      .bubble-sub-button-4 ha-icon{
        color: var(--circle-color4);
      }
    }

    *{
      .bubble-sub-button-5{
        background: radial-gradient(
            var(--card-background-color) 60%,
            transparent 0%
          ), conic-gradient(
            var(--circle-color5) var(--percentage5) 0%,
            var(--card-background-color) 0% 100%
          ) !important;
      }
      
      .bubble-sub-button-5: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;
      }
      
      .bubble-sub-button-5 ha-icon{
        color: var(--circle-color5);
      }
    }

    *{
      .bubble-sub-button-6{
        background: radial-gradient(
            var(--card-background-color) 60%,
            transparent 0%
          ), conic-gradient(
            var(--circle-color6) var(--percentage6) 0%,
            var(--card-background-color) 0% 100%
          ) !important;
      }
      
      .bubble-sub-button-6: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;
      }

      .bubble-sub-button-6 ha-icon{
        color: var(--circle-color6);
      }
    }

[MrBearPresident]

Round progress bar for batteries with a picture entity

yaml

type: custom:bubble-card
card_type: button
button_type: state
entity: person.guest
show_attribute: false
attribute: user_id
show_state: true
sub_button:
  - show_last_changed: false
    show_state: true
    show_background: false
    state_background: true
    icon: ""
    name: Phone
    show_name: false
    entity: sensor.tablet_battery_level_2
    show_attribute: false
    show_icon: true
  - entity: sensor.oude_tablet_battery_level
    icon: ""
    state_background: false
    show_background: false
    show_state: true
    name: Watch
styles: >+
  :host{
    --circle-color: ${hass.states['sensor.tablet_battery_state_2'].state ==='charging' ? 'green' : 'red'};
    --percentage: ${hass.states['sensor.tablet_battery_level_2'].state}%;
    --degrees: ${hass.states['sensor.tablet_battery_level_2'].state *3.6}deg;
  }

  .bubble-button-background{
    background-color: ${{'home': '#8AD926FF', 'away': '#1982C4FF'}[state] ?? '#ff0000AA' };
  }

  .bubble-sub-button-1 {
    color: ${hass.states['sensor.tablet_battery_state_2'].state === 'charging' ? 'orange' : '' } !important;
  }

  .bubble-sub-button-2 {
      color: ${hass.states['sensor.oude_tablet_battery_state'].state === 'charging' ? 'orange' : '' } !important;
    }
  .bubble-entity-picture{
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    overflow: hidden;
    border-radius: inherit;
    align-self: center;
    justify-self: center;
  }

  .bubble-icon-container{
    background: conic-gradient(var(--circle-color) var(--percentage) 0%, transparent 0% 100%);
  } 
  
  .bubble-icon-container:before{
    content: "";
    width: 100%;
    height: 100%;
    background: conic-gradient(white 3% 0%, transparent 0% 100%);
    animation: charging 4s linear ${hass.states['sensor.tablet_battery_state_2'].state ==='charging' ? '' : 'reverse'} infinite;
  }

  @keyframes charging {
    100% { transform: rotate(var(--degrees)); }
  }

  #place all DOM changing stuff on the bottom
  ${subButtonIcon[0].setAttribute("icon",
  hass.states['sensor.tablet_battery_state_2'].state === 'discharging' ?
  'mdi:phone' : 'mdi:cellphone-charging')}

  ${subButtonIcon[1].setAttribute("icon",
  hass.states['sensor.oude_tablet_battery_state'].state ===  'discharging' ?
  'mdi:watch' : 'mdi:watch-vibrate')}

force_icon: false
show_name: true
card_layout: large-2-rows