[JS+Editor Module] Timer Progress Bar

[FlorianKohn]

Timer Progress Bar

Version: 1.4
Creator: Florian Kohn

Important

Supported cards:

• Button

A progress bar for timers.
Turn the background of a button into a progress bar responsive to a timer.
The color of the progress bar can be adapted based on the timer's remaining time.

Configure this module via the editor or in YAML, for example:

timer_progress:
    name: "Timer Progress Bar"
    version: "1.4"
    creator: "Florian Kohn"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1655"

    supported:
        - button

    description: |
        A progress bar for timers.
        Turn the background of a button into a progress bar responsive to the timer.
        
        <br><br>
        <code-block><pre>
        timer_progress: 
            inverted: YOUR_VALUE
        </pre></code-block>

    code: |
        .bubble-content-container{
          --timer-progress-opacity: 1;
          --timer-progress-bg: var(--bubble-button-accent-color, var(--bubble-accent-color, var(--bubble-default-color)));
        }
        
        .bubble-content-container:before{
          content: "";
          width: 100%;
          height: 100%;
          opacity: var(--timer-progress-opacity);
          position: absolute;
          left: -100%;
          background-color: var(--timer-progress-bg);
          transition: transform 1s, opacity 0.5s, background-color 1s;
          transform: translateX(var(--timer-progress));
          pointer-events: none;
        }
        
        ${(() => {
          const timer_entity = this.config.timer_progress?.timer_entity || entity;
          const state = hass.states[timer_entity].state;
          const timer = hass.states[timer_entity].attributes;
          const start_color = this.config.timer_progress?.startColor || "primary";
          const end_color = this.config.timer_progress?.endColor || "primary";
          const invert = this.config.timer_progress?.inverted;
        
          function hexToRgb(h){return['0x'+h[1]+h[2]|0,'0x'+h[3]+h[4]|0,'0x'+h[5]+h[6]|0, 1]}
          function strToRgb(s){
            return s.replace(/^rgba?\(|\s+|\)$/g, '')
                  .split(',') // splits them at ","
                  .map(string => parseFloat(string));
          }
          let startColor;
          let themeStartColor = window.getComputedStyle(card).getPropertyValue(`--${start_color}-color`);
          if (themeStartColor !== "") {
            startColor = hexToRgb(themeStartColor)
          } else {
            startColor = strToRgb(start_color)
          };
          let endColor;
          let themeEndColor = window.getComputedStyle(card).getPropertyValue(`--${end_color}-color`);
          if (themeEndColor !== "") {
            endColor = hexToRgb(themeEndColor);
          } else {
            endColor = strToRgb(end_color);
          }
        
          function setRemainingText(text) {
            card.querySelector(".timer-progress-remaining")?.remove();
            const remContainer = document.createElement('span');
            remContainer.className = 'timer-progress-remaining';
            remContainer.innerText = text;
            card.querySelector(".bubble-state").appendChild(remContainer);
          }
          
          function computeColor(progress){
            const percentFade = progress/100;
            
            let diffRed = endColor[0] - startColor[0];
            let diffGreen = endColor[1] - startColor[1];
            let diffBlue = endColor[2] - startColor[2];
            let diffAlpha = endColor[3] - startColor[3];
            
            diffRed = Math.floor((diffRed * percentFade) + startColor[0]);
            diffGreen = Math.floor((diffGreen * percentFade) + startColor[1]);
            diffBlue = Math.floor((diffBlue * percentFade) + startColor[2]);
            diffAlpha = (diffAlpha * percentFade) + startColor[3];
            return `rgba(${diffRed}, ${diffGreen}, ${diffBlue}, ${diffAlpha})`;
          }
        
          const duration = timer.duration.split(":");
          const dur_secs = parseInt(duration[0]) * 60 * 60 + parseInt(duration[1]) * 60 + parseInt(duration[2]);
          function update(){
            const rem_secs = Math.floor((Date.parse(timer.finishes_at)-Date.now()) / 1000);
            const completed = (rem_secs/dur_secs).toFixed(2)*100;
            
            const rem_hours = Math.floor(rem_secs/3600).toString().padStart(2, "0");
            const rem_minutes = Math.floor((rem_secs%3600)/60).toString().padStart(2, "0");
            const rem_seconds = (rem_secs%60).toString().padStart(2, "0");
            const rem_string = ` • ${rem_hours}:${rem_minutes}:${rem_seconds}`;
            setRemainingText(rem_string);
        
            const completedAdjusted = invert?completed:100-completed;
            card.querySelector(".bubble-content-container").style.setProperty("--timer-progress", `${completedAdjusted}%`);
            card.querySelector(".bubble-content-container").style.setProperty("--timer-progress-bg", computeColor(completedAdjusted));
          }
        
          if(state !== "active" && card.dataset.timer_progress_interval){
            clearInterval(card.dataset.timer_progress_interval);
            card.removeAttribute('data-timer_progress_interval');
            card.removeAttribute('data-timer_progress_duration');
            card.querySelector(".bubble-content-container").style.setProperty("--timer-progress-opacity",  "0");
            setRemainingText("");
          }
          if(state === "active" && !card.dataset.timer_progress_interval){
          card.querySelector(".bubble-content-container").style.setProperty("--timer-progress-opacity",  "1");
            card.dataset.timer_progress_interval = setInterval(update, 1000);
            card.dataset.timer_progress_duration = timer.duration;
          }
          if(state === "active") {
            if(card.dataset.timer_progress_duration !== timer.duration){
              clearInterval(card.dataset.timer_progress_interval);
              card.dataset.timer_progress_interval = setInterval(update, 1000);
            }
            update();
          }
        })()}

    editor:
      - name: inverted
        label: Invert Progress
        selector:
          boolean: {}
      - name: startColor
        label: Progress Start Color
        selector:
          ui_color:
            default_color: primary
            include_none: false
      - name: endColor
        label: Progress End Color
        selector:
          ui_color:
            default_color: primary
            include_none: false
      - name: timer_entity
        label: Target Timer
        selector:
          entity:
            filter:
              domain: timer
      

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[rapton]

Perfect, thanks: Can ich use another entity for the timer? I want to use it for Alarmo arming time. The primary card is Alarmo and the card will show a progress bar for the timer I started when I armed Alarmo with an arming time.

[zee36]

Hey, how do you precisely choose a different timer entity to your alarmo switch card?
I'm about to set up something similar (e.g. cards for dryer, washer and dishwasher) where the underlying entity is for example the dryer, which will activate a timer helper, when initiating the programme. Would be nice to have the progress bar linked to this timer helper within the main dryer programme card.
Thanks mill

[rapton]

It does not work at the moment. My understanding is that it will come with an update.

[FlorianKohn]

Speaking of updates. I just updated the module so that you can choose a timer entity independent of the buttons entity. I hope this helps in your use case. Check it out and let me know 👍

[zee36]

Cool, it works perfectly, thanks a lot for the update!

[rapton]

Cool, thanks!! It works :)

[roumano]

Cool thanks, i like this module !

But i've found a bug :
The tap_action on the bubble-card only work if the timer is idle (aka not started)

As workaround, i use the tap_action on button_action with same action/entity

And the icon of mouse over the bubble-card is not the same between idle and timer started

[Cuteivist]

Cool thanks, i like this module !

But i've found a bug : The tap_action on the bubble-card only work if the timer is idle (aka not started)

As workaround, i use the tap_action on button_action with same action/entity

And the icon of mouse over the bubble-card is not the same between idle and timer started

To fix this issue you must add to .bubble-content-container:before line pointer-events: none;

.bubble-content-container:before{
  ...
  pointer-events: none;
}

FYI @roumano @FlorianKohn

[roumano]

@FlorianKohn ,

Hi do you think you can update the module of the Timer Progress Bar with this, so all people can use this ?

[FlorianKohn]

Good catch, I included your fix in the module. Thank you!

[roumano]

I found another small glitch, when click on a sub-element over a Timer Progress bar : a blue zone appear on the left of the bubble-card : (it's disappear after select a element)

[FlorianKohn]

This seems to happen only with the drop-down sub-buttons, as they explicitly set the root element's overflow property to visible. I will look into how to fix this.

[roumano]

Please found a small Tutorial about how to create/use a Timer Progress Bar with start then stop a switch (or any other action):

• Install Spook Custom Integration via HAC in order to have the action timer.set_duration : https://github.com/frenck/spook/blob/main/documentation/integrations/timer.md

• Create a timer entry ( ex: timer.chauffage_cuisine )

• Create a select entry with as exemple option: 15m / 30m / 1h 1h30 (ex: input_select.chauffage_cuisine)

• Creation a automation to translate these options to the timer previously created :

triggers:
  - trigger: state
    entity_id:
      - input_select.chauffage_cuisine
conditions: []
actions:
  - action: timer.set_duration
    metadata: {}
    data:
      duration: |
        {% if states('input_select.chauffage_cuisine')[-1] == 'm' %}
          {{ states('input_select.chauffage_cuisine')[0:-1] | int (default=0) * 60 }}
        {% elif states('input_select.chauffage_cuisine')[-1] == 'h' %}
          {{ states('input_select.chauffage_cuisine')[0:-1] | int (default=0) * 3600 }}
        {% else %}
          {{ states('input_select.chauffage_cuisine')[0:1] | int (default=0) * 3600 + states('input_select.chauffage_cuisine')[2:] | int (default=0) * 60 }}
        {% endif %}
    target:
      entity_id: timer.chauffage_cuisine
mode: single

• Create a second automation to stop the switch after the end of the timer :

triggers:
  - trigger: state
    entity_id:
      - timer.chauffage_cuisine
    from: active
    to: idle
    enabled: false
  - trigger: event
    event_type: timer.finished
    event_data:
      entity_id: timer.chauffage_cuisine
conditions: []
actions:
  - action: switch.turn_off
    metadata: {}
    data: {}
    target:
      entity_id: switch.resille_cuisine
mode: single

• Create a script to start or stop the time & turn off/on related switch script.chauffage_cuisine :

sequence:
  - choose:
      - conditions:
          - condition: state
            entity_id: timer.chauffage_cuisine
            state: active
        sequence:
          - action: timer.finish
            metadata: {}
            data: {}
            target:
              entity_id: timer.chauffage_cuisine
    default:
      - action: timer.start
        metadata: {}
        data: {}
        target:
          entity_id: timer.chauffage_cuisine
      - action: switch.turn_on
        metadata: {}
        data: {}
        target:
          entity_id:
            - switch.resille_cuisine
alias: Chauffage Cuisine
description: ""
icon: mdi:heating-coil

The Code of the bubble-card :

type: custom:bubble-card
card_type: button
button_type: switch
entity: timer.chauffage_cuisine
timer_progress:
  inverted: true
  timer_entity: timer.chauffage_cuisine
modules:
  - timer_progress
show_state: true
sub_button:
  - entity: input_select.chauffage_cuisine
    show_last_changed: false
    show_state: true
name: Chauffage Cuisine
scrolling_effect: false
tap_action:
  action: perform-action
  perform_action: script.chauffage_cuisine
  target: {}
button_action:
  tap_action:
    action: perform-action
    perform_action: script.chauffage_cuisine
    target: {}
  double_tap_action:
    action: call-service
    target: {}
    service: script.chauffage_cuisine
  hold_action:
    action: perform-action
    perform_action: script.chauffage_cuisine
    target: {}
show_last_updated: false
show_last_changed: false
show_attribute: false

[SFH008]

Hi Roumano
Looks good however I am unable to identify the "timer.set_duration" action. Can you help?

[roumano]

Good catch ! :
The Spook Custom Integration add this action service.

[SFH008]

Awesome. Thanks

[LukasSolf]

@FlorianKohn thanks for this awesome module!

Is it somehow possible to select a custom color by defining it with e.g. rgba(0, 150, 136, 1)? So far I wasn't able to make it work.

[FlorianKohn]

Sure thing. The module has an option for a start and an end color.
The progress bar will fade from the start to the end color depending on the progress of the timer.
If you only want a single color, just set the same color for both.

[LukasSolf]

Thanks for your answer @FlorianKohn.

However I didn't manage to define a custom color (e.g. rgba(0, 150, 136, 1)) instead of choosing a pre-defined color (e.g. green).
How does the working syntax looks like?

What I've tried sp far:
startColor: rgba(0, 150, 136, 0.1)
startColor: 'rgba(0, 150, 136, 0.1)'

[FlorianKohn]

Good Point @LukasSolf.
The UI configuration expects theme color variables, so the module only checked for those.
I updated the component. Setting the start or end color to 'rgba(0, 150, 136, 0.1)' in yaml should work now :)

[LukasSolf]

Awesome, thank you very much!

[cruelacid]

Really love your module - it is awesome!

Sadly, I am experiencing a strange bug which happens when an automation updates the timer in the background using timer.change. When this happens it almost looks like there are then two timers going concurrently superimposed on each other and you can see the UI jump between the two. If I leave the dashboard and come back, it is fine though. Attaching a video to illustrate - watch the Washer.

Master.Home.Assistant.Mozilla.Firefox.2025-09-23.14-24-20.mp4

[cruelacid]

What your automation is doing exactly ?

My washing machine reports an estimated remaining time for the cycle. However, it actively adjusts the time depending on how the wash is going - sometimes it will end sooner and sometimes it takes a bit longer. So I have an automation to update the timer using timer.change if the remaining time differs from the timer remaining time by more than 1 minute. When I update the timer, I run into this strange behaviour. Hope that explains and hope you might have a better way to implement this. I use timer.change in order to retain the elapsed runtime bar.

[FlorianKohn]

Hi,

I was able to reproduce the issue. It should be fixed in the module's updated version 1.3.

[cruelacid]

Thank you! Much appreciated!

[dvett01]

I am having the same issue with v 1.4
If I increase or decrease the timer with a button, it jumps back and forth with the new and the old timer value. I think its somehow still using the old "cached" value. It works as soons as i reload the page.
Any ideass?

Issue.mp4

[maxenceleduc92]

Still have this issue in v1.4 as well. I added to sub-buttons to call timer.change and add or remove 00:10 to the timer and I have the exactly same behavior.
Refreshing the webpage fixes the issue until next change

[pyspilf]

Not sure if it is only in my case, but I found I needed extra space between the state and the time remaining.. In my case it was displaying, for example:

Active• 00:00:03 instead of Active • 00:00:03 (note the missing space after 'Active')

I tried modifying the line:
const rem_string = • ${rem_hours}:${rem_minutes}:${rem_seconds};
but it was not working properly...

In my case what seemed to fix it was adding this CSS rule:

.timer-progress-remaining { 
        margin-left: 3px; /* Adjust this value (e.g., 3px) as needed */
    }

The code for the card I am using:

type: custom:bubble-card
card_type: button
button_type: state
modules:
  - timer_progress
  - home-assistant-default
timer_progress:
  timer_entity: timer.test_cooldown
  inverted: true
show_state: true
button_action:
  tap_action:
    action: more-info
entity: timer.test_cooldown

I am on the latest version of HA, Bubble Card, etc.

[silasmariusz]

Hi

Is it possible to display such slider over mediaplayer entity? Lets say i have Linux-based sat tuner which display me as background whats on the tv screen and i would like to display with some opacity such timer countdown as a slider and once finished execute some action to turn off both tv sat and tv

Have you any idea how to do sth like that?

[systems-monitor]

Odd bug in the current RC new feature.
I used to have my sub buttons bumped down with the sub buttons below module.
Testing the new main and below subbutton groups feature in core bubble card causes the bar to not draw all the way to the bottom of th button. Top is new config, bottom is old.

[systems-monitor]

code:

type: custom:bubble-card
card_type: button
button_type: switch
name: Front Yard
sub_button:
  main:
    - entity: timer.outside_front_lights_countdown
      show_last_changed: true
      tap_action:
        action: perform-action
        target:
          entity_id:
            - timer.outside_front_lights_countdown
        perform_action: timer.start
        data:
          duration: "900"
      double_tap_action:
        action: more-info
      show_attribute: false
      attribute: remaining
      show_state: false
      show_last_updated: false
      state_background: true
      show_background: true
      hold_action:
        action: perform-action
        perform_action: timer.finish
        target:
          entity_id: timer.outside_front_lights_countdown
  bottom:
    - entity: light.front_porch_plugs_1
      light_background: false
      tap_action:
        action: toggle
      double_tap_action:
        action: more-info
    - entity: light.front_porch_light
      tap_action:
        action: toggle
      double_tap_action:
        action: more-info
      light_background: false
    - entity: light.outside_grounds_lights
      tap_action:
        action: toggle
      double_tap_action:
        action: more-info
      show_icon: true
      light_background: false
    - entity: light.garage_front_lights
      show_icon: true
      light_background: false
      tap_action:
        action: toggle
      double_tap_action:
        action: more-info
    - entity: light.garage_floods
      tap_action:
        action: toggle
      double_tap_action:
        action: more-info
      light_background: false
    - entity: automation.garage_motion_lights
      tap_action:
        action: toggle
      double_tap_action:
        action: more-info
      icon: mdi:robot
tap_action:
  action: navigate
  navigation_path: "#frontyard"
modules:
  - card_text_style
  - get_state_attribute
  - rmn_conditional_state_coloring
  - timer_progress
card_text_style:
  name:
    font_size: 26px
    font_weight: bold
rows: "1.7"
card_layout: large-sub-buttons-grid
icon: mdi:tree
show_attribute: true
get_state_attribute:
  - entity: sensor.0xffffb40e0600d86d_temperature
  - entity: sensor.0xffffb40e0600d86d_humidity
rmn_conditional_state_coloring:
  conditional_colors_1:
    card_background:
      color_mode: wheel
      color_wheel: "#263d73"
      opacity: 90
    conditions:
      - condition: state
        entity_id: light.living_room_lights
        state: "on"
  default_configuration:
    card_background:
      color_mode: wheel
      color_wheel: "#8a8a8a"
scrolling_effect: false
button_action:
  double_tap_action:
    action: more-info
icon_border_progress: []
entity: light.outside_front_lights
timer_progress:
  timer_entity: timer.outside_front_lights_countdown
  inverted: true
  startColor: amber
  endColor: amber
show_name: true

[DomJeal]

Noticed the same, wondering if there's a fix for this when using the new sub buttons below feature.

[nalpo]

Hi, is it possible to disable the time remaining shown? I have two times atm and would like to keep the time from the entity state itself:

YAML:

type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
  main:
    - entity: timer.kuchentimer
      icon: mdi:pause
      tap_action:
        action: perform-action
        perform_action: timer.pause
        target:
          entity_id: timer.kuchentimer
    - entity: timer.kuchentimer
      icon: mdi:play
      tap_action:
        action: perform-action
        perform_action: timer.start
        target:
          entity_id:
            - timer.kuchentimer
  bottom: []
modules:
  - timer_progress
entity: timer.kuchentimer
show_state: true
timer_progress:
  timer_entity: timer.kuchentimer
  inverted: false

[pyspilf]

I just noticed the same thing after updating Bubble Card to the new release:

I have not been able to find a way to remove it completely. If I use show_state: false, then it shows only one time, but with the preceding dot:

[pyspilf]

Just tried, with a hardcoded value, so not sure it will work in all scenarios, but using a negative margin makes the preceding dot and space move out of view (not a clean solution, but it works for the moment)

And the CSS code:

.timer-progress-remaining { 
        margin-left: -7px; /* Adjust this value as needed */
    }

[jsacrist]

Using Bubble Card v3.1.3, just noticed around the time I upgraded to HASS 2026.3.1, the progress bars overflow to the left of the component it belongs to (see screenshot), seems like a similar problem was reported on July 31, 2025

[rapton]

Same issue on my dashboard!

[Clooos]

This will be fixed in v3.1.4, I will release this version today, sorry for that!

[masrezapamungkas]

Hi Clooos! Thank you for the update! I have same issue few moments ago. After receiving the update it's has been fixed right now! Great job! Thank you!

After:

[Clooos]

You're welcome! 😄