Timer Bar Card

A progress bar display for [Home Assistant][home-assistant] timers. Show the time left on your dishwasher, kitchen timer, 3D Printer, sprinklers, time-controlled lights (even plain ol' switches with automations), washing machine, and much more!

The card is also well tested. There are 24 tests, and they've helped me catch a few bugs already. 🐞

You may also be interested in these other related but unaffiliated cards:

• @Gluwc's Bar Card for numerical quantities or percentages
• @pmongloid's Flipdown Timer Card for timers but it has a cool flip effect!

Jump to: [Integration Support Status] [Turn On/Turn Off Switch] [Styling Examples]
[Working with New Integrations] [Examples] [Troubleshooting]

Installation

Timer Bar Card is available from [HACS][hacs], the Home Assisstant Community Store.

If you don't have HACS installed, follow the manual installation instructions.

Configure the Card

The card displays Home Assistant timers with minimal configuration.

YAML Configuration	Timer Bar Card
type: custom:timer-bar-card entities: - timer.alarm - timer.alarm_two - timer.alarm_three

Most integrations require adding at least one or two additional lines of YAML configuration so the card knows the format of the timer. For more information on how these options work, see Working with New Integrations.

Integration Support Status

🌈 Did you configure the card for another integration? 🌈
I'd love to add it here! Please submit an issue with the integration name and your configuration!

† BSH appliances - Bosch/Siemens/Neff/Gagenau. Check out issue #36 for the full card configuration!
‡ Devices connected through the HomeWhiz app: Beko, Grundig, and Arcelik brands

If your configuration isn't listed, follow the instructions in Working with New Integrations. Once you configure it, I'd super appreciate if you could submit an issue with the integration's name and your configuration. You'll get a mention in this document and help others save time. 🌈

Turn On a Switch for Some Time, Then Turn it Off

This is a common use case of the card, so here's a full example of how you can create a button on your dashboard to turn on a switch entity, count down ten seconds, then turn the entity off. This takes a few different components in Home Assistant: The Timer Bar Card, a Script, and an Automation (optional)

While the script is shown in YAML mode, you can alternatively create it in the visual editor (the Scripts tab in the same area as Automations).

type: custom:timer-bar-card
entities:
  - switch.cat_toy
duration:
  script: script.switch_on_10s
tap_action:
  action: call-service
  service: script.switch_on_10s
hold_action:
  action: more-info

alias: Turn the switch on then off
sequence:
  - service: homeassistant.turn_on
    data: {}
    target:
      entity_id: switch.cat_toy
  - delay: "00:00:10"
  - service: homeassistant.turn_off
    data: {}
    target:
      entity_id: switch.cat_toy
mode: single # also consider restart

In this example, the switch's id is switch.cat_toy and the script's id is script.switch_on_10s.

The card is given two actions: clicking/tapping it will calll the script, and holding it will bring up the switch entity's information. The script uses the Call Service action to turn on and off the switch.

⚠️ Make sure that if you're creating the script from the UI, you do not rename the delay action. The delay needs to have the duration at the end of its name (e.g. delay action 0:01:12)—this is how the card knows how long the timer is. You shouldn't need to rename the action in most cases, except if the duration is really small (sometimes the automatic name is delay for 10 seconds which does not parse).

The script's name is parsed because finding its true duration would require the card to independently access the Home Assistant API rather than using the shared state. I'm trying to keep this simple.

Using a script has several advantages:

• It does not interfere with manual operation of the switch.
• You can create multiple buttons to turn the same switch on for different amounts of time.
• If you create a new script for each button, the timer bar will only show on the button that was pressed.

However, you may wish to ensure that even under manual operation, the switch is never turned on for more than ten seconds. In this case, you can add an automation that is trigggered when switch.cat_toy's state changes to on and that calls the script.turn_on service with entity script.script_on_10s.

Simplifying with only an Automation + Card

If both the automation and the button are going to keep the switch on for the same amount of time, you can simplify the setup and not use a script. Add the delay and switch off services to the automation (or set the automation to only trigger when the switch is on for 10s) and change the card's duration: script option to duration: fixed: "00:00:10". Also change the tap action to either call the switch's turn on service or toggle the switch. If you change the automation's delay in the future, make sure to update the card too.

type: custom:timer-bar-card
entities:
  - switch.cat_toy
duration:
  fixed: 00:00:10
tap_action:
  action: toggle
hold_action:
  action: more-info

alias: Turn the switch off after it is turned on
trigger:
  - platform: state
    entity_id: switch.cat_toy
    to: "on"
condition: []
action:
  - delay: "00:00:10"
  - service: homeassistant.turn_off
    data: {}
    target:
      entity_id: switch.cat_toy
mode: single # also consider restart

🎨 Styling Examples

RECEDING PROGRESS BAR	SHOW ONLY PROGRESS BAR	USE WITH PAPER BUTTONS ROW
CUSTOMIZE APPEARANCE BASED ON TIMER PERCENTAGE	ICONS AND ENTITY IN CARD HEADER	EMBEDED IN AN ENTITIES CARD