Countdown Component

I needed a countdown component for a side project, and worked up a custom component so I could use it in multiple projects. I figured someone else might get some benefit from it.

This is NOT a countdown to a timezone dependent date (like Christmas). It’s a countdown to a fixed point in time (like a product launch). If you need a countdown to something that’s timezone dependent, feel free to clone this and modify it to fit.

https://anvil.works/build#clone:XHCKFBWC5BOCZFPL=D3VCBLCC26S6NOOXMIL7TQMC

The custom component itself has a number of properties you can use to modify what shows:

display_weeks, display_days, display_hours, display_minutes, display_seconds - these control what intervals of time are displayed.

interval_seconds - this is how often the display is updated

target_timestamp - this is the Unix timestamp in seconds of your target datetime

target_description - this is what you’re counting down to, if you want a description

separate_lines - set this to True if you want each time unit to be on a separate line

font_size, font_name - the normal font related properties

font_source - this is the URL of a web font, if you want to use a web font

8 Likes