Timer Bar Card (+ Mushroom Style)

Hey! I’d like to share the card I made for timers (and anything which has a timer like washing machines, alarms, and sous vide cookers). It’s 2 years old now but it’s never too late to make a forum post about it, right? It’s not like there’s a timer ticking…

I’ve seen a couple posts here asking how to make Mushroom cards show the time remaining for a timer. I realized that styling the card to make it match the look of the Mushroom cards wouldn’t take too much work (definitely way easier than working with timers), especially since Mushroom is also open source. Thus I’ve added a new configuration to turn the card into a :mushroom: mushroom.

You also don’t need a timer. The card can figure out the timer duration from other entities (even scripts) or be set in the configuration.

Thank you to everyone who’s given feedback on the project and contributed code. Have a great time :alarm_clock: with the card!


I’ve had your card installed for a while but completely forgot about it until you just mentioned it here. so thanks for the reminder as I literally just found a good use for it.

but I’d like a FR that I don’t see how to accomplish unless I’m missing it somewhere.

Is it possible to change the name of the entity?

I have a switch that turns on for a duration set by an input number and the resulting entity name is way too long to fit in the single line for the progress bar so I’d like to change the label for the progress bar.

here’s an example with the entity name used:


If I use “layout: full_row” I get this strange looking blank row with just the state:


I’d like to rename the entity in just this row to something like “progress”, “time left”, etc.

is that possible?

Yes it is. Sorry I completely forgot about adding an example for configuring an individual row. You can override each row individually, like

type: custom:timer-bar-card
  - timer.alarm
  - entity: timer.alarm_two
    name: "Special Name"
  - timer.alarm_three

The full_row layout will show just the state if the entity is off and only the progress bar if the entity is on.

Hope that helps! That’s sweet-looking irrigation dashboard you’re building.

1 Like

Awesome! Thanks!

I also figured out I can define the icon and if I make it a blank icon it removes the icon completely.

now it looks exactly like I want:


The buttons I’m using are from my own plugins. That one specifically is my binary control button row. I have several more at my github that are used for various other functions to complete the “theme”.

Wow nice! The buttons look similar to the paper buttons row plugin, but you have some extra features for those on/off entities.

1 Like

Mine were first. :wink:


1 Like

Like the style of this, thanks.
Is there a way to get the paused state to show as a static bar with time remaining, rather than ‘paused’?

I tried defining ‘paused’ as a state for active, but it shows the bar counting down, when really it’s not.

Also, is there a way that I could make this bar really skinny, or even combine it with the mushroom light card that it’s associated with?

You’re welcome! I’ll consider showing the progress bar when paused. The drawback is that not every type of entity that works with the card right now would be able to show that static bar. start_time and end_time alone wouldn’t be enough: there would also need to be a paused_time option so the card knows how long ago the timer was paused. Or there could be an attribute showing how much time was left when it was paused.

What you’ve shown is the skinniest you can make it. There’s no way to combine it with the light card, although that would be very cool.

Thanks for the response.

I was able to use the included options, tweak the card size with ‘card_mod’ and use conditional cards to show/hide under the conditions that I want. Doing this I’ve got a minimal view that suits my needs for our motion activated, time-out kitchen downlighting.


I came across this card looking for a progress bar and it looks great from the documentation. I am however stuck or it may not support this.

I wanted to use it for my Dishwasher. It’s a Miele and it uses Home Connect and I have two sensors that may be useful for this. One being the end time and the other being the program_progress. But I have no start-time like in the example for Miele washingmachine with the dishwasher. The program_progress is truly a percentage that goes up from 0 to 100 as the cycle goes on. So I thought it may be easy to use the program_progress. I however don’t get how to use it. For example to say the duration is not a time but “100”.

Any ideas or help would be welcome.

Hi there!

This looks fantastic and looks like what I’m after.

I recently got a Candy Smart Fi washer-dryer (Integration is here: GitHub - ofalvai/home-assistant-candy: Unofficial Candy/Haier appliance integration for Home Assistant), and it exposes the remaining time until a cycle is completed in minutes.

I have it set up thus far:

type: custom:timer-bar-card
  - sensor.wash_cycle_remaining_time
resolution: h:m

This does create a card with a time remaining, but it does not display any kind of bar, just a numerical value, like this:

I’ve poured through the documents on your Git (which is really clear, thank you!) but I can’t really see anything that would force a bar to appear.

Am I missing something?

Thank you.

Hey there. @AldoQ - This is something I’d like to support in the future, but it’s a lot of changes and I haven’t had the time to spend that time on another big update to this project. There’s really no way to do this right now with the card. I’m sorry I really don’t have a good solution for you. But there’s always the solution of forking the code and implementing the feature yourself ahahahah.

For your question @ZOXSOCKS, I think you’d need two things:

  1. The card needs to know that the time remaining is contained within the entit stay’ste: remain_time: { state: true, units: "minutes" }. It also needs to know how long the wash is going to be so that it can count down: duration: { fixed: '1:00:00' }.
  2. The card needs to know when the washing machine is running: you could try either guess_mode, or find another entity in your home assistant that describes whether or not the washing machine is running. If one of those exists, you can use active_state: { entity: "entityid" }.

Hope that’s enough to get you pointed in the right direction. Hopefully together with the this and the documentation you can get the bar to appear!


I am trying to figure out why I am not getting the bar to display at all. I appreciate any help.

I installed via HACS and verified that it shows as a resource. I initially only restarted HA but then later performed a reboot.

I have created 2 different cards in attempt of getting something to display.

type: entities
  - entity: input_boolean.saturntimer
  - entity: input_number.saturntimer
  - entity: sensor.print_time_remaining
  - entity: sensor.print_time_remaining
    type: custom:timer-bar-card
      entity: input_number.saturntimer
      units: minutes


type: custom:timer-bar-card
  - sensor.print_time_remaining
layout: full_row
text_width: 0px


It’s frustrating when that happens. Sometimes the browser just takes a little while to find the new card. I’d try giving it a day to see if it shows up, or try another browser and see if the card appears for the meantime.

This GitHub issue might help as well. Some others had the same problem, and it was eventually resolved by just waiting it out: Custom Element Doesn't exist: timer-bar-card · Issue #48 · rianadon/timer-bar-card · GitHub

EDIT: Post removed. See below.

I am trying to develop a progress bar only implementation. I can get that working just fine. I am wondering if there is a way to remove all of the padding and/or margins around the card. I would like to literally just have the progress bar.

1 Like

Can you share the card-mod code you used to minimize your progress bars for the timers? Thanks in advance.


type: custom:layout-card
layout_type: custom:grid-layout
  - type: conditional
      - entity: timer.range_light_countdown
        state: active
      type: custom:timer-bar-card
      entity: timer.range_light_countdown
      layout: full_row
      bar_direction: rtl
      bar_radius: 5px
      invert: true
      text_width: 0px
      compressed: true
      filter: true
      bar_height: 3px
  margin: '-25px 1px -27px 1px'
1 Like

Cool. So if I understand this correctly, it looks like you are using the margins of the layout-card to minimize the size of the bar. I am not sure that will work in my case, but it is good to know. I am trying to incorporate the progress bar into the bottom of a custom button-card layout and I am struggling to get it at the bottom. Thanks.

1 Like

Something like that, It’s a bit of a distant memory for me now.
There’s probably more elegant ways to do it - I’m no expert.