TimeFlow Card - Beautiful countdown timers For Home Assistant

Rishi8078 · July 23, 2025, 2:52pm

Hi everyone!

I’m excited to share a card I’ve been working on that brings beautiful countdown timers to Home Assistant: TimeFlow Card

A beautiful countdown timer for Home Assistant that features animated progress circles and smart, easy-to-read time formatting. Whether you’re tracking birthdays, deadlines, events, or anniversaries, this card makes it look great and keeps you updated in real time!

Features

Entity Support for dynamic countdowns from sensors
Real-time updates with 1-second precision
Smart Time Display with natural language formatting
Fully customizable colors, sizes, and time units
Template Support for dynamic content and colors

Use Cases

Project deadlines and milestones
Event countdowns (birthdays, vacations, holidays)
Maintenance schedules (backups, updates, renewals)
Goal timelines (exams, competitions, launches)
Server monitoring and automation tracking

Why TimeFlow Card?

The idea behind TimeFlow Card is to bring an elegant and animated way to visualize time-based events right on your Home Assistant dashboard something more expressive than plain numbers or static countdowns.

The visual design takes inspiration from modern iOS-style widgets and minimal dashboard aesthetics, focusing on smooth animations, intuitive layouts, and clean typography.

But what makes TimeFlow Card different?

Other countdown cards show time in just numbers — TimeFlow Card shows progress visually through animated rings and smart formatting.
It’s perfect for users who want a sleek, no-fuss way to track events like meetings, trips, or routines.
The card supports full customization through YAML, but also works out-of-the-box with default styles if you prefer simplicity.
The card supports Homeassistant Templates for all the important configs so it is heavliy customizable.

TimeFlow Card is still evolving, so you can expect improvements and possibly a few breaking changes as new features roll out. If you enjoy visual dashboards and care about how time is displayed, give it a try!

Ready to try it?

You can install TimeFlow Card easily via HACS by searching for TimeFlow Card under the Frontend section.

I’d love to hear your feedback or ideas to make it even better!

Made with for the Home Assistant community

Shinigami777 · September 6, 2025, 6:46pm

First off, fantastic cards, great job! Unfortunately, I ran into one problem. On the Tab A8 tablet, when I enter the page where I have added TimeFlowe cards, the cards start animation appears, followed by the time remaining on card, but it immediately resets and the animation appears again.

Rishi8078 · September 8, 2025, 10:36am

Hey @Shinigami777 , thanks so much for the kind words.

I’d love to help figure this out. To see what’s going on, would you be able to share two things ?

The code snippet showing how you’ve added the Time Flow cards.
A quick screen recording of the issue happening on your Tab A8.

Shinigami777 · September 21, 2025, 11:56am

Hi, sorry for replying so late, but I’ve been really busy lately.
The problem occurs on two of my tablets (Galaxy Tab A8 and A9+) when I use Fully kiosk browser.

square: false
type: grid
cards:
  - type: custom:timeflow-card
    title: AC Filter
    creation_date: "{{ states('input_datetime.ac_filters_last_change') }}"
    target_date: "{{ now().isoformat() }}"
    color: "#FFFFFF"
    progress_color: >-
      {% set filter_timestamp =
      as_timestamp(states('input_datetime.ac_filters_last_change')) %} {% set
      days_elapsed = (now().timestamp() - filter_timestamp) / 86400 %} {{
      '#1976D2' if days_elapsed < 30 else '#F57C00' if days_elapsed < 60 else
      '#D32F2F' }}
    background_color: >-
      {% set filter_timestamp =
      as_timestamp(states('input_datetime.ac_filters_last_change')) %} {% set
      days_elapsed = (now().timestamp() - filter_timestamp) / 86400 %} {{
      '#0D1A2E' if days_elapsed < 30 else '#2D1F0A' if days_elapsed < 60 else
      '#2C1810' }}
    show_days: true
    show_hours: false
    show_minutes: false
    show_seconds: false
    stroke_width: 1
    expired_text: >-
      🔧 {{ ( (now().timestamp() -
      as_timestamp(states('input_datetime.ac_filters_last_change'))) / 86400 ) |
      round(0) }} days ago!
  - type: custom:timeflow-card
    title: Vallox Filter
    creation_date: "{{ states('input_datetime.vallox_filters_last_change') }}"
    target_date: "{{ now().isoformat() }}"
    color: "#FFFFFF"
    progress_color: >-
      {% set filter_timestamp =
      as_timestamp(states('input_datetime.vallox_filters_last_change')) %} {%
      set days_elapsed = (now().timestamp() - filter_timestamp) / 86400 %} {{
      '#1976D2' if days_elapsed < 30 else '#F57C00' if days_elapsed < 60 else
      '#D32F2F' }}
    background_color: >-
      {% set filter_timestamp =
      as_timestamp(states('input_datetime.vallox_filters_last_change')) %} {%
      set days_elapsed = (now().timestamp() - filter_timestamp) / 86400 %} {{
      '#0D1A2E' if days_elapsed < 30 else '#2D1F0A' if days_elapsed < 60 else
      '#2C1810' }}
    show_days: true
    show_hours: false
    show_minutes: false
    show_seconds: false
    stroke_width: 1
    expired_text: >-
      🔧 {{ ( (now().timestamp() -
      as_timestamp(states('input_datetime.vallox_filters_last_change'))) / 86400
      ) | round(0) }} days ago!
columns: 2
![1000636730|640x395](upload://qPHEV7cDfEGd00JRmnxOVTP1v5U.gif)

1000636730

Shinigami777 · October 18, 2025, 5:07pm

Hi, is there a chance you could take a look at my problem? I will be very grateful.

Rishi8078 · January 15, 2026, 2:51pm

Hi @Shinigami777,

First, I want to sincerely apologize for the long delay in getting back to you.
I’ve looked into this, and the issue is caused by how the Android System WebView (which Fully Kiosk uses) handles date parsing. It is stricter than desktop browsers and fails when there is a space in the date instead of a “T”.

The Quick Fix:
You can fix this in your YAML by adding this replace filter to your date templates:

# Change this:
creation_date: "{{ states('input_datetime.your_entity') }}"

# To this:
creation_date: "{{ states('input_datetime.your_entity') | replace(' ', 'T') }}"

I am tracking this bug and the permanent code fix in this GitHub issue if you want to follow along: https://github.com/Rishi8078/TimeFlow-Card/issues/30

Zappos · January 22, 2026, 4:33pm

Hi Rishib, just found this and it’s perfect for what I want. I’ve configured using card_mod without problem but can’t find any way to set the progress circle path colour (not the progress_colour). have I missed something?

Rishi8078 · January 23, 2026, 2:02pm

Hi @Zappos , this should work:

card_mod:
  style:
    .: ""
    progress-circle$: |
      .progress-bg {
        stroke: #515751;
        filter: opacity(10%); 
      }

Do you think i should make it a config like the progress_colour ?

charlieny100 · January 24, 2026, 8:30pm

Love the idea of a sunrise/sunset display. Not being much of a coder I copied and pasted the same code into a TimeFlow card. I end up with a black card with a progress bar but no text. Is there more I need to do? Using Apple products with a web page and the HA app showing the same thing.

Zappos · January 26, 2026, 1:54pm

Hey, thanks for the quick reply. I can’t seem to get that to work. Here’s my card_mod. I have a lot more stuff going on with it though…

card_mod:
  style: |
    .: ""
    progress-circle$: |
      .progress-bg {
        stroke: #0000FA; 
        filter: opacity(10%); 
      }
    ha-card {
      zoom: 0.7;
      position: relative;
      overflow: hidden;
      background-color: transparent !important;
    }
    ha-card::before {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background: url("/local/images/retirement2.jpg") center/cover no-repeat;
      filter: blur(1.8px);
      opacity: 0.7;
      transform: scale(1.0);
      z-index: 0;
    }
     .card-content {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
    }
    .header {
      margin-bottom: 0 !important;
    }
    .content {
      margin-top: 0 !important;
    }
    ha-card .title {      
      font-size: 1.7rem;  
      color: white;
      line-height: 1.3;
    }
    ha-card .subtitle {      
      font-size: 2.0rem;
      font-weight: bold;
      color: black;
    }

Yes, I’d definately add that as a visual config option. If you’re using a light image as a background then the path doesn’t show too well, so being able to change easily would be great.