rianadon / timer-bar-card

A progress bar display for Home Assistant timers

Timer Bar Card

A progress bar display for 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!

🍄 Newly Added: Mushroom Styling 🍄 I've been really enjoying Paul Bottein's beautiful Mushroom card collection, so I've added new styles to make the card feel at home in your mushroom garden. Jump to Configuring the Mushroom Style for examples.

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, 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!

Integration	Status	Extra configuration required
Home Assistant timer	supported & tested	no! 🎉
Automation-controlled switches	supported & tested	set duration to { fixed: x:xx:xx }
Sun	supported	See the example
OpenSprinkler	supported	no! 🎊 (example)
Amazon Alexa Timer	supported	start_time, end_time, and guess_mode [#22]
Bambu Lab	supported	active_state, end_time [#143] (♡ @andrewtimosca)
BMW Connected Drive	supported	active_state, end_time [#60] (♡ @hoeni!)
Cleverio Sous Vide (Tuya)	supported	multiple: see #67 (thanks @develop-daraf!)
Daily Schedule	supported	active_state, end_time [#80] (♡ @igorsantos07)
Google Home Timer	supported	auto-entities card or template entity
Home Connect †	supported	active_state, end_time [#36] (♡ @rickdeck!)
HomeWhiz ‡	supported	multiple: see #121 (thanks @GigiPompieru)
Irrigation Unlimited	supported	duration and start_time [#5]
Meater	supported	active_state, end_time [#122] (♡ @Bascht74!)
Miele	supported	template entity required: see #62
Moonraker	supported	mutliple: see #107 (thanks @user74656!)
OctoPrint	supported	multiple: see #58 (thanks @schmacka!)
PrusaLink	supported	start+end time, guess_mode [#106] (♡ @deadly667!)
RainMachine	supported	multiple: see #46 (thanks @shbatm!)
SmartThings	supported	multiple: see #45 (thanks @TheRedBull205!)
Tesla	supported	template entity required: see #98
ThinQ washer/dryer	supported	configure duration to initial_time [#15]
ThinQ dishwasher	supported	multiple: see #70 (thanks @ollo69 for the help)
Google Home Alarm	not really [#18]	template entity required

† 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).

Card Configuration	Script Configuration
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.

Card Configuration	Automation Configuration
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
RENAME ENTITIES AND STATUSES	STYLE TO YOUR UNIQUE TASTES	MUSHROOM STYLE

See also: Use Templates in Configuration

📦 Working with New Integrations

The diagram above shows the minimal configuration you'll need to make the card show the timer. For each of these properties, you'll need to find an entity (doesn't have to be the one you're displaying in the card) that has this information in its state or attributes. The only exception is Guess Mode, which is an option you set on the card to make it guess when the timer is active in lieu of configuring an Active State.

⏰ There is an option missing in this diagram: Remaining Time. Some integrations have a Remaining Time attribute, but the attribute does not update every second like a countdown! This is to reduce the strain on your Home Assistant: Lot of entities updating every second could slow it down.

However, some integrations do update a Remaining Time attribute (or create an entity whose state is the Remaining Time and update its state every second). For these, you can use (Remaining Time + one of Start Time/Duration + Guess Mode or Active State) or (Remaining Time + Active State)

The Developer Tools are a great resource for viewing states and attributes.

📝 In the screenshot above, Duration and End Time are the attributes duration and finishes_at, and the state active can be used as the Active State.

Here's all the options you can use in the configuration. I recommend setting debug: true while setting up the card to help work through any problems.

YAML option	Type	Description	Default
active_state	string /list	State(s) used to indicate a timer is running	active, on, manual, program, once-program
pause_state	string /list	State(s) used to indicate a timer is paused	paused
waiting_state	string /list	State(s) when a timer is scheduled for later †	waiting
state	{fixed: string}	Explicitly specify a state without an entity.	-
state_attribute	string	Use an attribute when calculating the above.	-
guess_mode	bool	Attempt to guess mode=active. ‡	false
start_time	timeprop	How the timer's start time is found	{attribute: start_time}
end_time	timeprop	How the timer's end time is found	{attribute: end_time}
duration	timeprop	How the timer's duration is found	{attribute: duration}
remain_time	timeprop	How the timer's remaining time is found	{attribute: remain_time}
debug	bool	Show debugging info in card	false

timeprop = { attribute: string, units: "duration"|"hours"|"minutes"|"seconds" = "duration" }
         | { entity: string, attribute?: string, units="duration" } | { script: string }
         | { fixed: number, units="duration" } | { state: any, units="duration" }

† requires a start_time attribute to calculate when in the future the timer will start.
‡ waiting_state and pause_state will still have an effect, but the card will disregard active_state if it can guess the timer mode.

To recap, set active_state to the state of your entity while the timer is running (usually all lowercase). If the state changes as the timer runs (for instance if the state is the number of seconds left in the timer), check if any of the attributes indicate whether the timer is running. If so, use active_state together with state_attribute, otherwise, set guess_mode: true and make sure you have two of start_time/end_time/duration set.

Specifying timers without an entity

For advanced usage, you can specify all properties of a timer directly, without using an entity. In this case, the entity field is optional, and is only used to open the more-info popup when clicked.

To do this, pass {fixed: <value>} for the state property and any 2 of the time/duration properties above. This mode ignores the *_state fields; the fixed: value must be exactly active, paused, or waiting.

Configuration of time properties (start_time, end_time, etc)

These examples all use duration, but they are applicable for all of the time properties: start_time, end_time, and remain_time as well.

1. My entity has an attribute that looks like duration (for example, timespan). Supply the following configuration:

type: custom:timer-bar-card
entities:
  - switch.my_switch
duration:
  attribute: "timespan" # If your your duration attribute looks like 0:10:00.
debug: true

2. My duration isn't in the 0:10:00 format! I need to use different units!

Use the units property and specify seconds, hours, or minutes. The default value of units is duration, which expects the hh:mm:ss (duration/remaining) or 2021-09-07T20:24:13+00:00 (start/end time) format.

duration:
  attribute: "timespan" # Should look like 10 or 10.0
  units: minutes
debug: true

3. My duration comes from another entity

Assume there's a duration slider with id input_number.slider1. The available units are the same ones as above. You can also combine entity and attribute together if you need to fetch an attribute from a different entity!

type: custom:timer-bar-card
entities:
  - switch.my_switch # ID of the switch, which provides the active/idle status
duration:
  entity: input_number.slider1
  units: minutes # Since the slider state is a number like 10.0
debug: true

4. My duration comes from the entity's state

Set duration: { state: true }. This is less common for duration, but some integrations give the End Time as an entity with format like 2021-09-07T20:24:13+00:00 (you don't need units for start/end time).

duration:
  state: true
debug: true

5. A script determins when the entitty turns off

The duration will be fetched from the length of the Delay action in the script. For this to work, the Delay action must not be renamed or configured with the alias property in the YAML.

duration:
  script: script.my_script_id
debug: true

6. Ugh. I know what the duration is but it's nowhere in Home Assistant

If there's no state or attribute in Home Assistant which shows your duration, you can give the duration to the card. The units also work here, if you don't like using the hh:mm:ss format.

type: custom:timer-bar-card
entities:
  - switch.my_switch
duration: { fixed: 0:05:00 } # 5 min
debug: true

Once the card is working properly, you can safely remove debug: true. It doesn't affect any of the functionality.

Still unclear? Don't know if you can make your entity work with the card?
🧡 Please create an issue and tell me the entity so I can improve these instructions! ❤️️

The Rest of the Configuration Options (📚 Reference)

Name	Type	Requirement	Description
type	string	Required	custom:timer-bar-card
entity	string	Optionalish	Display a single entity, for use in entities cards
entities	list	Optionalish	Display multiple entities in a card

Either entity or entities must be supplied. Use entity if you'd like to embed the timer inside a card, or entities if you would like to create your own card (and use the card options at the end of this section).

Customization

Optional properties to change icons, colors, and sizes.

Name	Type	Requirement	Description	Default
icon	string	Optional	Customize the icon to show next to the timer	-
image	string	Optional	Customize the image url to show in place of the icon	-
state_color	boolean	Optional	Change the icon's color if the timer is active	-
active_icon	string	Optional	Override icon when timer is active	-
text_width	string	Optional	Space alotted for the time remaining (i.e. right offset of bar)	3.5em
invert	boolean	Optional	Make the progress bar count down (start at 100%, end at 0%)	-
bar_width	string	Optional	Width of progress bar (decrease if the entity name is cut off)	calc(70% - 7em)
bar_height	string	Optional	Height of progress bar	8px
bar_foreground	string	Optional	Foreground color of progress bar	primary color †
bar_background	string	Optional	Background color of progress bar	#eee
bar_radius	string	Optional	Border radius of the progress bar	-
bar_direction	string	Optional	Override the direction of bar progress. Can be ltr or rtl	-
layout	string	Optional	Hide the name (hide_name) and (optionally icon—full_row)	normal
resolution	string	Optional	Set to seconds, minutes, or automatic to switch between h:m:s and h:m formats.	seconds
format	string	Optional	Overrides resolution. Set to hms/hm/d/h/m/s or use string interpolation like %m minutes	hms
modifications	array	Optional	Adjustments to make depending on percentage (example)	-
translations	dict	Optional	Mapping of substitutions for status text

† the primary color is taken from your theme using var(--mdc-theme-primary, #6200ee);

Card options

Customize the header and display of entities within the card. To use the card, entities must be defined.

Name	Type	Requirement	Description	Default
name	string	Optional	Card name / title	-
compressed	boolean	Optional	Decrease vertical spacing between entities	false
filter	boolean	Optional	Only show non-idle timers and sort them by their status	false
show_empty	string	Optional	If filter selects no entities, show this text instead	-
header_entity	string	Optional	Replace title with the icon & name of an entity †	-
header_secondary	string	Optional	Show additional information under header_entity ‡	-

† If you specify header_entity, the name option will no longer have any effect.
‡ See the secondary_info parameter in the entities documentation for a list of possible values.

Actions

You can also use actions with this card to trigger services or perform actions in the dashboard when the card is clicked. The action configuration options are hold_action, tap_action, and double_tap_action.

Examples

Receding progress bar

By default, the progress bar will expand. If you'd like the bar instead to shrink (as if it were counting down, rather than counting up), reverse the bar direction and invert the percentage:

bar_direction: rtl # omit this for a left-aligned progress bar
invert: true

This example uses the bar_radius option to round the edges of the progress bar. I like my progress bars advancing from left to right, but you can keep the bar aligned to the left by omitting bar_direction: rtl.

Use with OpenSprinkler integration

entities:
  - sensor.s14_station_status
  - sensor.s15_station_status
  - sensor.s16_station_status
type: custom:timer-bar-card
name: Sprinkler
active_state: # This option isn't needed due to the defaults
  - manual
  - program
bar_width: 35%
compressed: true
filter: true # So only the running and scheduled stations are shown

Be sure to check out the Irrigation Unlimited and RainMachine examples if you use a different irrigation controller.

Using active_state, end_time, etc: The sun integration

I adore this example because it uses so many configuration options at once to create a timer I never would have dreamed of until #71. The sun entity has two states: above horizon or below horizon. The configuration defines only an end_time, letting the card pick up when the sun entity last changed states as its start times. The translations option provides alternate text to show when the timer is not running.

Even though I took this screenshot in the dark theme, it's still daytime.

type: custom:timer-bar-card
name: Sun
entities:
  - entity: sun.sun
    name: Sunrise
    icon: mdi:weather-sunset-up
    active_state: below_horizon
    end_time:
      attribute: next_rising
    translations:
      above_horizon: Not yet ☀️
  - entity: sun.sun
    name: Sunset
    icon: mdi:weather-sunset-down
    active_state: above_horizon
    end_time:
      attribute: next_setting
    translations:
      below_horizon: Not yet 🌙
text_width: 5em
bar_radius: 4px

Embedded in an entities card

title: Timer
type: entities
entities:
  - entity: timer.alarm
    type: custom:timer-bar-card
  - entity: timer.alarm_two
    type: custom:timer-bar-card
  - entity: timer.alarm_three
    type: custom:timer-bar-card

Icons and entity in card header

entities:
  - timer.water_timer
  - timer.water_timer2
  - timer.water_timer3
type: custom:timer-bar-card
icon: mdi:water-outline
active_icon: mdi:water
compressed: true
header_entity: binary_sensor.sprinklers
header_secondary: last-changed

Home Assistant configuration.yaml:

timer:
  water_timer:
    name: Front Lawn
    duration: "00:15:00"
  water_timer_2:
    ...

template:
  - binary_sensor:
      - name: "Sprinklers"
        icon: mdi:sprinkler-variant
        state: "{{ states.timer| selectattr('state', 'in', ['paused', 'active'] ) | list | count }}"

Go to the end for themes and multicolored icons

Style to your unique tastes

type: custom:timer-bar-card
entities:
- timer.alarm
- timer.alarm_two
bar_height: 20px
bar_background: '#222'
bar_foreground: 'linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet)'
text_width: 6em
bar_width: 40%

Customize appearance based on timer percentage

type: custom:timer-bar-card
entities:
  - timer.alarm
modifications:
  - elapsed: 40%
    bar_foreground: orange
    active_icon: mdi:fire
    bar_height: 12px
  - elapsed: 70%
    bar_foreground: red
    active_icon: mdi:fire-alert

For each modification, you have the option of using remaining or elapsed to filter based on the time left or total time remaining in the timer. You can also use percentages (40% = 40% of duration) or durations (0:00:10 = 10 seconds). See my comment here for a more detailed example!

All modifications that match are applied, with the last modification having precedence. This means you'll likeley want to list them in increasing order of durations/percentages if using elapsed and decreasing order if using remaining, so that styles are overridden as the timer progresses farther.

Do note that remaining: 1% is equivalent to elapsed: 99%, and that for a 10 second timer remaining: "00:00:01" is equivalent to elapsed: "00:00:09".

Show only progress bar

type: custom:timer-bar-card
entities:
  - timer.alarm
layout: full_row  # hides the name and icon, but not time remaining
text_width: 0px # hide the time remaining

You can also choose to hide only the entity name with layout: hide_name.

Rename Entities and Statuses

Want to change the names of the entity statuses because they are in the wrong language or they just aren't cool enough for you? You can do that! Need to use different settings for each entity? You can do that too (replace the entity id with a YAML dict where the entity key is the ID, then you can add any other configuration option you like to change it for that entity).

You can also use these per-setting entities to rename invidual rows of the card, override the icon for a row, or in fact change almost any setting available in the card.

type: custom:timer-bar-card
entities:
  - timer.alarm
  - entity: timer.alarm_two
    name: "Alarm Two"
    icon: mdi:circle
    translations:
      idle: Gas, gas, gas!

P.S. If you'd like to change the text shown when the timer is active, then check out the format option!

Use with Paper Buttons Row

The card supports usage with the amazing Paper Buttons Row element! You can add extend_paper_buttons_row to your configuration to add buttons to the side of the card!

Not all options (namely hide_badge and hide_state) are not supported. Please create an issue if you need these.

type: custom:timer-bar-card
entities:
  - timer.alarm
extend_paper_buttons_row:
  position: right
  buttons:
    - icon: mdi:party-popper

Use Templates in Configuration

The card by itself does not support using templates to customize the name and icon. However, using a plugin like the Templatable Configuration Card or Card Templater, you can customize the name of entities, the icons, or any configuration option in the card.

I like the latter card since it uses the same templating format as Home Assistant, but the latest release (as of June 2023) with important fixes is still in beta and it takes longer to render the templates. This delays the rendering of the timer card enough to trigger the alert about the time being out of sync. Thefore, I recommend you use the former card unless you do not have the time to learn its unique templating language.

Templatable Configuration Card (recommended)	Card Templater
type: custom:config-template-card variables: TEMP: states['sensor.upstairs_temperature'].state entities: - timer.alarm_three - sensor.upstairs_temperature card: type: custom:timer-bar-card icon: mdi:sunglasses entities: - entity: timer.alarm_three name: ${'It is ' + TEMP + ' degrees'}	type: custom:card-templater entities: - timer.alarm_three - sensor.upstairs_temperature card: type: custom:timer-bar-card icon: mdi:sunglasses sync_issues: ignore # Because templates take time to render entities: - entity: timer.alarm_three name_template: It is {{ states.sensor.upstairs_temperature.state }} degrees

Mushroom Style

🍄 These styles require the Mushroom Card collection to be installed.

To enable the mushroom style, you'll need to configure the card with entity rather than entities and add the mushroom option. You can show multiple cards side by side using the Grid Card.

Setting mushroom: changes some of the card defaults, including rounded corners and the bar color, to reduce the amount of configuration you need to make the card look mushroomy. Nevertheless, you can still customize these options!

Timer Bar Card	Card Configuration
	type: custom:timer-bar-card entity: timer.alarm_two mushroom:

Under the mushroom option you can supply the options you'd normally give the mushroom card. Not every timer bar card configuration option is supported here (such as the layout option), and not every mushroom option is supported as well. What you get instead is a Frankenstein baby of both cards.

Timer Bar Card	Card Configuration
	type: custom:timer-bar-card entity: switch.my_switch duration: fixed: '00:10:00' invert: true bar_direction: rtl bar_width: 60% mushroom: layout: vertical color: green

You can also configure these Mushroom options:

• primary_info and secondary_info can be any of name, state, last-changed, last-updated, or none to change the information shown on the card.
• You can also leave these unconfigured and alternatively display custom text by editing name (primary info) and format (secondary info). Combine with templates to mimic mushroom-template-card.
• icon_type can be icon (default) or none (no icon).
• icon_color sets both bar + icon color just like the color option. It's there to be consistent with the original Mushroom options.
• fill_container makes the card expand to the surrounding grid.

Manual installation

1. Download timer-bar-card.js from the latest release and move this file to the config/www folder.
2. Ensure you have advanced mode enabled (accessible via your username in the bottom left corner)
3. Go to Configuration -> Lovelace Dashboards -> Resources.
4. Add /local/timer-bar-card.js with type JS module.
5. Refresh the page? Or restart Home Assistant? The card should eventually be there.

Using in your own custom cards

If you're publishing a custom card for Lovelace and would like to use the timer bar card inside of it, you can install the card via NPM as a dependency:

npm install --save lovelace-timer-bar-card

To avoid conflicts with the timer-bar-card-entity-row element this plugin defines, you'll need to give your custom element a different tag name.

import { fillConfig, TimerBarEntityRow } from 'lovelace-timer-bar-card/src/timer-bar-entity-row';

// Assign the tag <my-card-timer-bar-entity-row> to the entity row element
window.customElements.define('my-card-timer-bar-entity-row', TimerBarEntityRow);

// Use like this
const config = fillConfig({
    // extra customization on top of default config
});
return html`<my-card-timer-bar-entity-row
              .config=${config} .hass=${hass}
            ></my-card-timer-bar-entity-row>`;

For an example of using the timer bar card as a dependency, you can view the source code of the OpenSprinkler card.

Themes? Multicolored icons? Where?

The green and reddish-orange theme (which I called Earth) as well as the gradient theme can be found here. Neither are polished and both need work.

For multicolored icons, you can use this super-duper-hacky frontend module here until some form of support officially lands in Home Assistant. I would not rely on my module. Its purpose is merely to produce pretty screenshots.

Troubleshooting

Sync Issues

Home Assistant Time: All Home Assistant timers, automations, etc. are run using the local time of whatever device is running Home Assistant, be it a Raspberry Pi, virtual machine, etc. If the timer will do something important at 5 PM, it will happen whenever your Home Assistant device thinks 5 PM is.

App Time: One often views the Home Assistant dashboard on another device like a phone or tablet. These devices have separate clocks, and often they are synced using the Network Time Protocol. If the syncing is set up correctly, the two clocks will never drift more than 10 or so milliseconds apart.

Home Assistant does not provide any API to figure out what it believes the time to be. Instead, the card reads the time from the app (Home Assistant App or browser) to calculate how much time remains in a timer. Any discrepancies between the two times will affect the accuracy of the card. If the clocks are more than one second out of sync, the card will display an incorrect amount of time remaining.

If the Home Assistant and App Times are more than 0.5 seconds out of sync, the card will display a warning to alert you of the problem. In this case, I suggest you first visit a website such as time.is or use the command line to compare each device's time to a trustworthy source (such as time.is or Google's server). Usually, one device will have an accurate time while the other won't. Make sure the inaccurate device has NTP correctly set up (here's a guide for Raspberry Pi). For other devices, the system preferences will often have a setting like "Set time and date automatically" that should be enabled).

If you cannot synchronize the clocks, you can configure the card to calculate how out-of-sync they are (up to 1 hour) and adjust its clock to match Home Assistant's clock. Please note this option may not be a reliable solution for the problem:

sync_issues: fix

You can also simply disable the card's warning using the following configuration option:

sync_issues: ignore

timer-bar-card's Issues

Incorrect remaining time with home assistant timers

This card is not working properly with the Home Assistant built-in timer integration: https://www.home-assistant.io/integrations/timer/

The card incorrectly calculates the remaining time, as shown below.

Timer configuration

timer:
  baby_feeding:
    duration: 00:00:30
  baby_diaper:
    duration: 00:00:30

Card configuration

type: custom:timer-bar-card
debug: true
duration:
  attribute: duration
end_time:
  attribute: finishes_at
entities:
  - timer.baby_feeding
  - timer.baby_diaper

Result

Progress bar reset after resuming from pause in 'sensor' mode

Describe the bug
I compared the behaviour of the progress bar after resuming from pause between "timer" and "sensor" entities and I noticed a difference. When a "sensor" entity resumes, the progress bar is reset, while for the "timer" entity the progress bar continues from where is was before the pause (which should be the right behaviour imo). Let's take this example to illustrate :

1. Two cards are showing the progress of a timer of 60s with 17s remaining -> progress bar are similar (normal)
   
2. The device is paused -> progress bar is hidden (normal)
   
3. The device is unpaused, timers are running again -> progress bar of the "sensor entity" is restarting from 0 while the progress bar of the "timer entity" is picking up where is stopped before the pause.
   

Your card configuration

type: custom:timer-bar-card
entities:
  - entity: sensor.four_micro_ondes_operation_state
active_state:
  - Run
pause_state:
  - Pause
end_time:
  entity: sensor.four_micro_ondes_remaining_program_time
  state: true
debug: true

type: custom:timer-bar-card
entities:
  - entity: timer.four_micro_ondes
debug: true

Debug information
See screenshots above

Configuration for RainMachine Integration

RainMachine

The RainMachine integration holds the completion time in a separate entity than the switch for the zone. It's state appears as the finish datetime in UTC.

RainMachine controllers "cycle" between zones to allow for soak time, so the switches state only indicates that it is active in a running program, but not necessarily currently watering. Using state_attribute: status gets the actual status of the zone. Here I use extend_paper_buttons_row to still add a toggle button for the zone on the end of the row.

Thanks @rianadon for adding the state_attribute option and paper-buttons-row support!

Your card configuration

entity: switch.sprinklers_back_yard
type: custom:timer-bar-card
end_time:
  entity: sensor.sprinklers_back_yard_run_completion_time
  state: true
state_attribute: status
active_state:
  - Running
pause_state:
  - Queued
name: Back Yard
extend_paper_buttons_row:
  position: right
  buttons:
    - entity: switch.sprinklers_back_yard
      name: false
      icon: mdi:power
...

Caveats
See above.

Feature request: Add Color thresholds by percent

Add Color thresholds by percent, like:

color_percent_thresholds:
  - value: 0
    color: var(--label-badge-blue)
  - value: 80
    color: var(--label-badge-yellow)
  - value: 90
    color: var(--label-badge-red)

or

color_percent_thresholds:
  - value: 80
    color: var(--label-badge-yellow)
  - value: 90
    color: var(--label-badge-red)

from 0% to 79% - default color ...

v1.15 - Timer Bar Card Not Showing

Timer bar card does not display as expected.

HA Version: 2021.12.4
Timer Bar Card Version: v1.15

      type: custom:timer-bar-card
      entity: timer.fan_schedule_duration
...

The last modification is not reset when timer restart

Hi!

Thanks for this awesome card! :)

I have a question about saving the last modification by the card if timer was restarted, for example it's is my mod:

              modifications:
                - greater_than: 50
                  bar_foreground: orange
                  active_icon: mdi:circle-slice-4
                - greater_than: 75
                  bar_foreground: red
                  active_icon: mdi:circle-slice-6
                - greater_than_eq: 94
                  active_icon: mdi:timer-10

when greater_than: 75 is active phase, for example, and my timer is restarted, the progress bar is still got red bar foreground, so I need reload lovelace. Dunno, if it's card issue or lovelace. My browser is latest Chrome.

Any suggestion? Thanks in advance!

Documentation error : pause_state

Describe the bug
The documentation describes to use "paused_state" as a configuration option, although the correct and working one is "pause_state"

Your card configuration

type: custom:timer-bar-card
entities:
  - sensor.microwave_operation_state
active_state:
  - Run
pause_state:
  - Pause
end_time:
  entity: sensor.microwave_remaining_program_time
  state: true

Debug information
N.A.

Card appears no to pick up the theme

Strange one for ya,
The card appears not to be picking up the theme and I cant figure out how to change the background to match the theme

Bars not showing

Describe the bug
Thanks for this card! It's really great at visualising timers. The bars don't show using the entities and the text is maligned. Tried using just a single entity but that didn't work either. Using Vivaldi (a Chromium-based browser) on Ubuntu 18.04 LTS x86_64

Your card configuration

type: custom:timer-bar-card
entities:
  - timer.pomodoro_main
  - timer.pomodoro_planning
  - timer.pomodoro_break
  - timer.pomodoro_break_long
...

Debug information
Please add debug: true to your configuration and either take a screenshot or paste the output here!

With debug: true

Pool Timer

I have configured my pool timer with an input helper number (Pool Run Time)

I then created a sensor to calculate how long the pump has been running
platform: history_stats
name: Pool Pump Run Time
entity_id: switch.sonoff_10013c5b81
state: "on"
type: time
start: "{{ now().replace(hour=0, minute=0, second=0) }}"
end: "{{ now() }}"

The reason for this is due to power stability issues so I can not count on the switch start time as this could be incorrect due to a power failure (or if you have to restart HA due to updates or config changes).

Now I am trying to figure out how to use this all together to get the timer bar.

Hello there is no problem, rather a question.

How can I use this identity attribute?
Thanks in advance.

Bar from full to empty

Hi there,

a great Progress bar I use for the duration my Climate is running.
Due to the fact that it is a count down rather than a count up I'd love to have the option to have the progress bar run from full to empty.
That would be awesome.
Thanx for the great work.

Exceeded time with fixed duration

Hello,
Thanks for this great card. :)
I would like to know if it would be possible to do both things:

1. Count up (or show the total elapsed time) once the countdown of fixed duration is elapsed
2. Continue to add up color in the progress bar, corresponding to the exceeded time

My use case is the following:
I have a dumb washing machine and currently I know with a smart power plug when it's working or not based on power usage.
I use the time-bar-card to show an estimated progress based on a fixed duration.
If the time is exceeded, the progress bar disappear and it just shows "On".

I would like the progress bar default color to shrink and continue to add another color, e.g. red to represent the exceeded time.
If the washing machine is on for 2 hours (instead of 1), the bar would be half blue, half red to show to excess percentage.
In the meantime, instead of showing a countdown timer, the timer would count up (either from 0 or from the original time + the exceeded time). In my example, it would be either "+1h00" or "2h00".

My current configuration:

type: custom:timer-bar-card
entities:
  - entity: binary_sensor.template_buanderie_lavelinge_running
    duration:
      fixed: '1:00:00'

Help: start_time from an entity, duration from the state

Hi, first of all, thank you for this card 👍
I'm trying to add it to my UI but I'm having some issues trying to figure it out.

I have the following entities (given by the ofalvai/home-assistant-candy integration)

---

Entity : sensor.washing_machine
State: Running
Attributes:

program: 3
temperature: 40
spin_speed: 600
remaining_minutes: 54
remote_control: true
fill_percent: 88
friendly_name: Washing machine
icon: mdi:washing-machine

---

Entity : sensor.wash_cycle_status
State: Wash
Attributes:

friendly_name: Wash cycle status
icon: mdi:washing-machine

---

Entity : sensor.wash_cycle_remaining_time
State: 54
Attributes:

unit_of_measurement: min
friendly_name: Wash cycle remaining time
icon: mdi:progress-clock

I think I could guess the starting time by saving the time when the washing machine State switches to "Running", but I don't know how to do it (sorry I'm quite new to Home Assistant)

Any ideas?

Thanks 😃

Bar sometimes doesn't show

I had it working fine overnight but when I woke up today, the card was there, the text and the icon.. it says it's active but there is no bar showing the time... what could be causing this?

https://imgur.com/a/ce7cvKJ

-- Edit Update --
State: active (state mode = idle)
Mode: idle (auto mode = N/A, unused)
Duration: 404400 second
Time remaining: 0
Counter: 0
Attr: {"duration":"112:20:00","editable":false,"finishes_at":"2021-10-14T14:45:00+10:30","remaining":"01:1:28","remainingText":" 1 hour, 1 minute","friendly_name":"Google Leave Time Remaining"}

`type: custom:timer-bar-card
entities:
  - entity: sensor.google_leave_time_remaining
    name: break...
bar_width: 70%
active_icon: mdi:alarm
bar_height: 10px
text_width: 0px
bar_foreground: green
modifications:
  - greater_than: 90
    bar_foreground: orange
    active_icon: mdi:fire
    bar_height: 12px
  - greater_than: 95
    bar_foreground: red
    bar_height: 20px
    active_icon: mdi:fire-alert`

Use Different Values for the idle and active states

First off, great card! Love that it's so versatile already.

Currently I have an automation that fires a notification every 30 minutes that my garage door is open. It's triggered whenever cover.main_door != 'closed'. I'm not using timers, but a long running automation.

I'm thinking it'd be an additional key (on the entity OR on the whole card):

  idle: closed
  active: open

I know I could just move these over to timers, I'm just not a fan of the idea of creating timers in the configuration.yaml

Hydrawise Support

Hello,

Love your card! Do you have a suggestion or know how to use it with your card?

The Hydrawise integration returns a sensor entity with the time remining on the watering. I believe I have to use a timer entity for the card?

The only other entities it returns is a binary sensor if it is watering, and the next watering cycle timestamp.

Thanks!

Set a specific time in modifications

It would be great if we could specify a specific amount of time left, for example 10 seconds before the end:

                - greater_than_eq: 94
                  active_icon: mdi:timer-10

In above example, I find 10 seconds like 94% from my 3 minutes timer :)

Entity name not displayed

I've just noticed that at some point in the recent past (most likely since the move to 2021.10.0 (and now on .1)) I no longer see the names of entities in the timer card:

Card works as expected:

Config looks like this, has not changed is months:

type: custom:auto-entities
card:
  type: custom:timer-bar-card
  Name: Timers
  compressed: false
  bar_direction: rtl
  bar_foreground: '#eee'
  bar_background: 'var(--mdc-theme-primary, #6200ee)'
sort:
  method: name
filter:
  include:
    - domain: timer
  exclude:
    - name: /remaining/

I tried this even without the auto-entities wrapper, got the same behavior, I see the same issue on several PCs/browsers including the mobile app, running v1.11 of the card.

Add show_emtpy option

Is it possible to add a show_empty option? I use the progress bar card to show which zones of OpenSprinkler are watering, but would like the card to show up even when it's empty. Basically the exact same option/behaviour as the filter_card default in HA.

Allways show the bar

Hello, when a timer is stooped or paused I don't see the bar, it would be nice to keep the bar showing (with the settings) if the timer is other than running.

For example:

  - type: custom:timer-bar-card
    entity: timer.test_timer
    full_row: true
    text_width: 0px
    bar_direction: rtl
    bar_foreground: '#eee'
    bar_background: 'var(--mdc-theme-primary, #6200ee)'

The bar goes from full blue to none, right to left. But if I pause it it disappears showing a "paused" message (it should keep the bar stopped where it stopped). Also if the timer is not running, it disappears (it should be visible full blue).

Is this possible?

Thank you

[Google Home Alarm] Unable to pull end time

Using Google home integration (Have version that pulls alarms and timers from Google home devices) alarm state has date and time in a format that shows on this card but does not generate a bar.

Right now it shows as
2021-08-30T06:00:00:06-07:00

Alarm is set for 6AM

New Customization option border-radius for bar

It would be great, if we can get an option to define a border-radius for the bar.
Something like: bar_border-radius: 10px would be awesome!

Home Connect (BSH - Bosch/Siemens/Neff/Gagenau) Dishwasher

Integration name and link
Home Connect
https://github.com/home-assistant/core/tree/dev/homeassistant/components/home_connect

Used to connect to BSH appliances (Bosch/Siemens/Neff/Gaggenau/...)
In my case, I connected to a Bosch Dishwasher to display the time left until completion.

Your card configuration

type: custom:timer-bar-card
entities:
  - entity: sensor.dishwasher_operation_state
    name: Dishwasher running
    active_state: Run
    active_icon: mdi:dishwasher
    end_time:
      entity: sensor.dishwasher_remaining_program_time
    text_width: 4em
    bar_width: calc(70% - 10em)

Result:

Caveats

• I had to adapt text_width as the remaining program time can be rather large (i.e. "1:45:30"), could be good to make this dynamic based on text-length because when the timer is below 1h the spacing looks a bit awkward compared to other timerbars
• It took me quite a while to understand that the timer-bar didn't work because I need to define a manual active_state (without that, it just displays the content of Remaining_Program_Time). Could be good to emphasize that in case you want to add it to the docs.

Relevant Home Connect entities for your reference:

• sensor.dishwasher_operation_state can only take the states "Unavailable" or "Run"
• sensor.dishwasher_remaining_program_time changes to "Unavailable" when not running, so I put the whole yaml inside a conditional to only display when sensor.dishwasher_operation_state is "Run"

FYI: There is also another entity from the Home Connect integration called sensor.dishwasher_duration, however in case of my device it was always "Unavailable" (might be used by other appliances from BSH)

Hope that helps. Keep up the good work!
Cheers!

Pull requests: Custom status for unavailable state of sensor time

I have some sensor of a dishwasher, which shows unavailable when dishwasher does not turn on or start.
I wish you can add some options to change status of a sensor time when it unavailable or finish.
Here is something I think:

'unavailable_status: "Not start" | finish_status: "Done"'

Best wishes for you, my friend!

LG ThinQ Washer/Dryer Data not working

First off, amazing card you have here. I'm just new to it and seem to be unable to get it working with my Device entities.

I use the LG ThinQ HACS integration to get my Washer and Dryer data.
The Dryer looks like this...

It appears each needed bit of data is in a separate entity. It seems in order to plot an accurate progress bar you would need two entities:
sensor.dryer_remain_time = 0:07
and
sensor.dryer_initial_time = 0:20

The next problem is that these times are written in the m:s format which there doesn't seem to be support for.

Perhaps, adding support for defining a template for the calculation and maybe a format string to define the format the values are coming in as.

Right to Left Option seems to not work ?

Installed v 1.5, using this config:

        - type: custom:timer-bar-card
          entity: timer.filament_dryer_duration
          name: Timer
          state_color: true
          bar_direction: rtl
          bar_foreground: '#eee'
          bar_background: 'var(--mdc-theme-primary, #6200ee)'

using ltr and rtl makes no difference, have tried reload and refresh

Thanks

Renaming entity?

Hi, love this project! Is there a way to rename the entity using this card? I've seen other projects use 'name: "new name"' to change the entity to something else. I see there's translations here but it seems to only affect the states and not the name of the entity, unless I've got something mixed up ...

input_number feature request

First of all, thanks for the awesome card!

I'm using it with my sprinkler system, however, my entities do not have any attributes. I set the sprinkler duration base on an "input_number" and then using automations to stop the sprinklers based on the value of the input_number. I'm trying to use the same input_number to set the fixed duration. For example:

type: custom:timer-bar-card
entities:
  - switch.garden_irrigation
duration:
  fixed: {{ states('input_number.garden_irrigation_timer') | int }}

Unfortunately, this does not seem to work. When going back into editing the card, it shows:

  fixed:
    '[object Object]': null

Any chance this can be supported in a future version of this card? Or if there is another way to achieve the same.

Question: Progressbar not refreshing?

Hey,

I've got the Bar Card working bit alexa timers. But right now the bar is only refreshing if i press F5. Is this by design or did i something wrong?

type: custom:timer-bar-card
entities:
  - sensor.echo_buro_next_timer
bar_foreground: '#eee'
bar_direction: rtl
bar_background: 'var(--mdc-theme-primary, #6200ee)'
start_time:
  attribute: process_timestamp
end_time:
  attribute: prior_value
bar_width: 35%
guess_mode: true
filter: false
debug: false

Regards Marc

[question] Multiple timers from Alexa?

Hi!

Firstly - Thank you for this card - It's excellent! I've added my Echo show as a timer, and it displays the last timer I've set perfectly.

My question is what's the recommended way of showing all timers set on a specified Echo device? I have a show in the kitchen and set multiple timers when cooking - It would be great to show all of them automatically.

Thanks in advance,

Neil

Input_select time

First of all excellent work with this module.
I love it and it was just what I looking for. I'm using the Entity type Switch with the Duration function and one input_select where I have manually defined some time periods which is what I want. But the count starts and comes to the end, but it doesn't make me turn off switch.

`type: entities
entities:

• entity: switch.rega_jardim
  name: Rega jardim
  icon: mdi:sprinkler
  secondary_info: last-updated
• entity: input_select.tempo
  icon: mdi:clock
  name: ' '
• entity: switch.rega_jardim
  type: custom:timer-bar-card
  icon: ' '
  bar_foreground: '#222'
  bar_background: green
  bar_direction: rtl
  compressed: true
  duration:
  entity: input_select.tempo
  state_color: true
  `
  Is there any way to switch.turn_off to entity when finish time? What do you suggest? Use an automation or create a kind of sensor and then an automation?

Thanks again. Hug

Feature request - inverted progress

Hello,

hopefully something pretty quick to implement - I would appreciate the option to change the direction of the progress bar, i.e. instead of a blue bar extending from left to right make it a blue bar retracting from right to left.

Thanks!

Idle translation

Hi,

When an idle timer is set in a entity card, I got the text "En veille" displayed since my language is set to french.
Would it be possible to translate it in your card too?

Thank you. Great card by the way!

Question, request maybe - CSS

Does the card accept styles (CSS)?
I would like to change font but not able to achieve it somehow.

BTW nice and neat card, great thank you

[FR] Enable Toggle Option for Entity

First thanks for the card!

This is usable for the RainMachine integration with:

# On Zones:
duration:
  units: seconds
  attribute: time_remaining
# On Programs:
start_time:
  attribute: next_run

However, each zone and program is also a switch, and I would like to see an option to keep the toggle on the far right of the entity row. Basically combine this into 1 row:

Also, it would be nice to be able to select the timer status attribute separately from the state.

For example, RainMachine with show all of the zone states as "ON" when a program is active, but it has some modes that will actually cycle between zones to let things soak in. Therefore you can only tell if a zone is actually flowing by using the status attribute which uses "running" for active_states and pending if "on-but-paused" or not running when the zone/program is off.

Program:

Zone:

Google home timers, custom time format

I am trying to setup google home timers with this however their time format is a bit different, i cant show debug info due to some issues but this is attribute data. Any ideas?

entity name is sensor.kitchen_display_timers
state is 2021-09-05T22:27:04+00:00
state attributes are...

next_timer_status: set
timers:

• timer_id: timer/xx-xx-xx-xxx-xx
  fire_time: 1630880824
  local_time: '2021-09-05 22:27:04'
  local_time_iso: '2021-09-05T22:27:04+00:00'
  duration: '0:20:00'
  status: set
  label: null

integration: google_home
friendly_name: Kitchen display timers
icon: mdi:timer-sand
device_class: timestamp

Only mention of a start time i can see here is from update time values or from doing end minus duration since in example above
fire time (epoch) and local times all have the end time of the timer

SUGGESTING: Other card types please

Love this plugin.

Would be great to also have a round wheel style timer indicator for glance and buttons.

SmartThings (Samsung)

Integration name and link
SmartThings
https://github.com/home-assistant/core/tree/dev/homeassistant/components/smartthings
https://www.home-assistant.io/integrations/smartthings/

Your card configuration
Preview of a samsung dryer:

type: custom:timer-bar-card
entities:
  - entity: sensor.droger_dryer_machine_state
    name: Dryer
    waiting_state: Stop
    active_state: run
    icon: mdi:tumble-dryer-off
    active_icon: mdi:tumble-dryer
    end_time:
      entity: sensor.droger_dryer_completion_time
    text_width: 4em
    bar_width: calc(70% - 10em)

Result:
(Will add a screenshot later when the dryer is running again)

Caveats

• The "active_state" is lower case, so this is "run".
• The Bar_width was taken from: #36

Explicitely set duration

Hi, I've been waiting for this since you posted the mock on reddit! Thankyou!

Just one question, I would like to attach this to a switch activated via scheduler card or automation. I do not have any duration attribute, but the switch will turn off in 60 minutes.

Is there any way to sey duration via yaml or do I need to set up a fake timer? I prefer this component over bar-card since it updates continuously.

Show only when active embedded in entities card

Hi,
Is it possible to hide the bar until it is inactive? In details: I'd like to use the timer bar card embedded in an entities card. The entitiy is a switch, the duration is an input_number.
I'd like to see the bar only when the switch is in ON state.
My current code is:

- entity: switch.onoff
    name: ON-off switch
    type: custom:timer-bar-card
    bar_direction: rtl
    bar_foreground: '#eee'
    bar_background: 'var(--mdc-theme-primary, #6200ee)'
    duration:
      entity: input_number.duration_time
      units: minutes

full_row + icon

Hi.

full_row: true and an icon without a title or name would be nice.

Greetings, Stefan

[Feature Request] Hide Icon &/ Text

Hi - thanks for an amazing card!

I have a (another) niche use case for this, and would like to be able to hide the icon and/or text (maybe also units??).

For my specific usecase, I would like to use it conjunction with this plugin (with the option full_row set to true), to archive something pretty here:

YAML code for screenshot above

type: custom:vertical-stack-in-card
title: Bedroom Fan
horizontal: true
cards:
  - type: custom:button-card
    tap_action:
      action: toggle
    entity: switch.bedroom_power_plug
    icon: mdi:fan
    show_state: false
    show_name: true
    name: Sleep Fan
    styles:
      card:
        - width: 100px
        - height: 110px
  - type: entities
    entities:
      - type: custom:slider-entity-row
        entity: input_number.bedroom_fan_sleep
        full_row: true
      - type: custom:timer-bar-card
        entity: timer.bedroom_fan_sleep
        bar_direction: rtl

Custom Element Doesn't exist: timer-bar-card

Describe the bug

I installed via HACS, and I see the frontend integration in HACS, but I am receiving the error "Custom Element doesn't exist: timer-bar-card".

Your card configuration

type: entities
entities:
  - entity: timer.entrance_hallway_lights_timer
    type: custom:timer-bar-card

Debug information
Please add debug: true to your configuration and either take a screenshot or paste the output here!

Sorry, relatively new to HomeAssistant. I'm moving from 25 years on a different home automation platform.

• time-bar-card.js & time-bar-card.js.gz exists in /config/www/community/time-bar-card, that differs from the manual install instructions?

• advanced mode is enabled

• under Settings -> Dashboard -> Resources, I see:
  /hacsfiles/timer-bar-card/timer-bar-card.js?hacstag=376904517118 JavaScript Module

• I have rebooted home assistant, and still do not see any change?

I'm open to suggestions....and pointers in helping get this working...

Hide text but show icon?

Hi, really enjoy your card, but wondering if there's a way to hide the text (not the time remaining), but show the icon?

'full_row' would hide both text & icon, be nice if we could hide one or the other, or both.

type: custom:timer-bar-card
entity: timer.bathroom_fan
bar_direction: rtl
bar_background: null
text_width: 0px
full_row: 

Just a suggestion, cheers!

Update Card on Entity Update

Hello,

I have recently set this card up to show progress of a long-running computer process, and it looks great and works quite well!

I am feeding the duration via an entity (input_number) and units, which works well. My situation is a bit strange in that I want to be able to update the duration while the timer is running (if the time remaining estimate on the computer process that I am monitoring goes up or down). The plumbing from my monitoring script into HA works, but I have to reload my whole HA dashboard in order for the card to update. After the update, the card has received the updated value and looks right.

My question is, would it be possible to have the card monitor the state of the duration entity (and perhaps other entities), and when that state changes update the card? I do understand that this is likely a niche use case and may not be worth the effort or complexity if they are hard.

Thanks!
Nick

SUGGESTION: Name Value

Is it at all possible to add a variable to change the name of the timer? can change everything else.. if you change name: it changes the title.. but I want to be able to change the timer name itself... not to just have it disappear or be very long as the entity names it

The bar is not displayed correctly

Describe the bug

Hello,
I use "Timer Bar Card" for many weeks already
and everything was ok.
Today on the Home Assistant system I have some
updates and suddenly there were no
bars were no longer visible.
I have added some values and now have the following result:

When the bar is displayed, there are suddenly 2-3 lines.
Previously, everything was displayed in one line.

what can i do now?

Greetings...

Your card configuration

type: custom:timer-bar-card
entity: timer.treppenlichtaus
name: Treppe
attribute: duration
unit: sec
bar_foreground: '#eee'
bar_background: 'var(--mdc-theme-primary, #6200ee)'
bar_height: 8px
bar_width: 80%
bar_direction: rtl
text_width: 300px

Debug information
Please add debug: true to your configuration and either take a screenshot or paste the output here!

after timer lapses, switch doesn't go off

Hi,
Countdown timer is working good updating the values as soon as i press ON from a switch. unfortunately after time get lapse the switch remains in ON state instead of going OFF. Am i missing something? can you please suggest?

Your card configuration

title: Wifi switches
type: entities
entities:
  - entity: switch.phone_charger_2
  - entity: switch.phone_charger_2
    type: custom:timer-bar-card
    duration:
      fixed: '0:00:05'
...

Debug information
Please add debug: true to your configuration and either take a screenshot or paste the output here!

Colorized segments - as indicator for total timer with added up runtimes

I use a total timer, which also adds up individual run times.
(several lawn sprinklers with individual runtimes - one combined total timer)

Would it be possible to adjust the timer in the following way:

• Within a timer you create several segments.
• each segment has a start and end value
• Each segment can be assigned an individual color.
• Undefined areas have the default color.

Somthing like:

segments:
  # Segment 1
  - segment:
	- start: "00:00:00"
	- end: "00:04:00"
	- color: "#0066cc"
  # Segment 2
  - segment:
	- start: "00:04:00"
	- end: "00:09:00"	
	- color: "#0099ff"
  # Segment 3 not defined --> 00:09 till end with default colour

Currently:
3 runtimes (4, 5 and 6 minutes) --> 15 minutes total timer - all in blue

Feature request:
3 runtimes (4, 5 and 6 minutes) --> 15 minutes total timer
00:00 - 00:04 ---> sprinkler 3 in dark blue (or color value x)
00:04 - 00:09 ---> sprinkler 2 in blue (or color value y)
00:09 - 00:15 ---> sprinkler 1 in light blue (or color value z)

This way you could comfortably see already during the runtime in which stage you are.