[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
${(() => {

  card.timerEntity = hass.states['timer.help_house_testtimer02'];
  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.timerResult =
              (hours > 0 ? (hours + ":") : "") +
              ("0" + minutes).slice(-2) + ":" +
              ("0" + remainingSeconds).slice(-2);
          card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container').innerText = card.timerResult;

        } catch (error) {
          card.timerResult =  card.timerEntity.attributes.duration;
          card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container').innerText = card.timerResult;
        }
  };
  
  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-sub-button-1 .bubble-sub-button-name-container').innerText = card.timerEntity.attributes.duration;
		card.timerResult = card.timerEntity.attributes.duration;
      } else if(card.timerEntity.state==='paused') {
        card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container').innerText = card.timerEntity.attributes.remaining;
		card.timerResult = card.timerEntity.attributes.remaining;
    }
  }else{
    card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container').innerText = card.timerResult ? card.timerResult : "error" ;
  }
  
 }	
)()}

[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

[MarcoGos]

Cross-browser solution for safari and ios devices

Replace the lines:

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);

with:

const [dhours, dminutes, dseconds] = (card.timerEntity.attributes.duration + "").split(':').map(Number);
const maxtime = (dhours * 3600) + (dminutes * 60) + dseconds;
const [rhours, rminutes, rseconds] = (card.timerEntity.attributes.remaining + "").split(':').map(Number);
const remainingTime = (rhours * 3600) + (rminutes * 60) + rseconds;

In my situation I only needed to replace the "const maxtime" line. That was enough to get it to work.

[marcuscps]

Do you mind expanding why it doesn't work for iOS devices?

[MarcoGos]

The "Date" in Safari and on iOS does only support "1970-01-01 00:10:00" but it gets "1970-01-01 0:10:00". Also the "UTC" part was not accepted. Maybe "GMT" does work, but I find this new code more reliable.

[Gittythetub]

Hi,

Amazing what you have done here. I wanted to use it for my irrigation schedule, but I failed miserably. I hope you can help me out here!
I created a slider and the minutes you select from the slider will be used as the duration of the timer. The sub buttons start and end an automation, which in turn starts or stops the timer and triggers the irrigation. (up to here it works). I thought I can just add your style code and replace the card.timerEntity with my timer entity and leave everything else as is.
Below is the code (up to the entity change):

type: custom:bubble-card
card_type: button
button_type: slider
entity: input_number.irrigation_terrace
show_state: true
force_icon: false
show_attribute: false
attribute: step
slider_live_update: true
sub_button:
  - entity: input_boolean.irrigation_terrace_start_timer_helper
    icon: mdi:play
    tap_action:
      action: toggle
    show_state: false
    state_background: false
  - tap_action:
      action: toggle
    icon: mdi:close-circle
    entity: input_boolean.irigation_terrace_stop_timer_helper
    show_state: false
    state_background: false
card_layout: large
    
styles: |-
  :host{
    --circle-color: var(--bubble-accent-color, var(--accent-color));
    --percentage: ${(() => {
      card.timerEntity = hass.states['timer.irrigation_timer_terrace'];
      const now = new Date();