You can build a live countdown timer in Bubble using custom states, the Do When Condition Is True event, and date math. This tutorial walks you through creating a timer that counts down to a target date and updates every second, showing days, hours, minutes, and seconds remaining.
Overview: Creating a Countdown Timer in Bubble
Countdown timers are useful for product launches, flash sales, event pages, and limited-time offers. Bubble does not have a native timer element, but you can build one using custom states and the Do When Condition Is True event to create a ticking countdown that updates in real time. This tutorial covers the complete implementation.
Prerequisites
- A Bubble app with a page where you want the countdown
- Basic understanding of custom states and workflows
- A target date/time for the countdown
Step-by-step guide
Set up the target date and display elements
Set up the target date and display elements
On your page, add four pairs of Text elements to display the countdown: one for days, hours, minutes, and seconds, each with a label below (e.g., Days, Hours, Minutes, Seconds). Add a custom state on the page called target_date with type date. Set its default value to your countdown target date, or leave it dynamic if the date comes from the database. Also add a custom state called timer_running of type yes/no, defaulting to yes.
Expected result: Four text elements ready to display the countdown values, and custom states for the target date and timer status.
Calculate time remaining using date math
Calculate time remaining using date math
In each Text element, use dynamic expressions to calculate the remaining time. For days: target_date - Current date/time's days (using the :format as days operator). For more granular control, use the expression: (target_date - Current date/time) :extract seconds, then divide by 86400 for days, modulo and divide by 3600 for hours, modulo and divide by 60 for minutes, and modulo 60 for seconds. Use the :floor or :rounded to operators to get whole numbers.
Pro tip: Bubble's date difference operators return decimal values, so always round down using :floor to avoid showing fractional seconds.
Expected result: Each text element displays the correct remaining time component (days, hours, minutes, seconds).
Create a recurring update using Do When Condition Is True
Create a recurring update using Do When Condition Is True
Go to the Workflow tab. Add a new event: Do when condition is true. Set the condition to timer_running is yes. Check the Run this Every time checkbox. In the actions, add Set State on the page — set a custom state called tick of type number to tick + 1. This forces Bubble to re-evaluate all dynamic expressions on the page. Then add a Pause Before Next Action of 1 second (1000 milliseconds). The loop runs continuously, updating the display every second.
Pro tip: The tick state change forces Bubble to recalculate all date expressions, which is what makes the timer appear to update in real time.
Expected result: The countdown display updates every second, showing a live ticking timer.
Handle the timer reaching zero
Handle the timer reaching zero
Add another Do When Condition Is True event with the condition: target_date < Current date/time AND timer_running is yes. In the actions, set timer_running to no (to stop the loop). Then show a message, trigger an action, or navigate to another page — whatever should happen when time runs out. You can show a group that was hidden, display an alert, or enable a button that was previously disabled.
Expected result: When the countdown reaches zero, the timer stops and your desired action triggers (e.g., showing a message or enabling a feature).
Style the countdown display
Style the countdown display
Select each number text element and increase the font size to make it prominent. Use a monospace or bold font for the numbers so they do not shift width as digits change. Add background shapes or groups behind each number for a card-style appearance. Use conditional formatting to change colors when the timer is close to zero — for example, turn the text red when less than one hour remains.
Expected result: A visually polished countdown timer that matches your app's design.
Complete working example
1COUNTDOWN TIMER WORKFLOW SUMMARY2=================================34CUSTOM STATES (on the page):5 - target_date (date) = your target date/time6 - timer_running (yes/no) = yes7 - tick (number) = 089DISPLAY ELEMENTS:10 Text: DaysDisplay11 Content: ((target_date - Current date/time) / 86400):floor12 Text: HoursDisplay13 Content: (((target_date - Current date/time) mod 86400) / 3600):floor14 Text: MinutesDisplay15 Content: (((target_date - Current date/time) mod 3600) / 60):floor16 Text: SecondsDisplay17 Content: ((target_date - Current date/time) mod 60):floor1819WORKFLOW 1: Timer Loop20 Event: Do when condition is true21 Condition: timer_running is yes22 Run this: Every time23 Actions:24 1. Set state: tick = tick + 125 2. Pause before next action: 1000 ms2627WORKFLOW 2: Timer Complete28 Event: Do when condition is true29 Condition: target_date < Current date/time AND timer_running is yes30 Run this: once31 Actions:32 1. Set state: timer_running = no33 2. Show element: TimerCompleteMessage34 3. (Optional) Trigger custom event or navigate3536CONDITIONAL FORMATTING:37 All number displays:38 When target_date - Current date/time < 3600:39 → Text color: redCommon mistakes when creating a countdown timer in Bubble.io: Step-by-Step Guide
Why it's a problem: Not forcing a re-evaluation of date expressions
How to avoid: Use a custom state (tick) that increments every second to force Bubble to re-evaluate all expressions on the page
Why it's a problem: Forgetting to stop the timer loop when the countdown ends
How to avoid: Set timer_running to no when the target date passes, and add timer_running is yes as a condition on the loop
Why it's a problem: Not rounding the calculated values
How to avoid: Always use the :floor operator on calculated values to display whole numbers
Best practices
- Use a monospace font for timer digits so the display width stays constant as numbers change
- Store the target date in the database if it varies per user or event, rather than hardcoding it
- Add a condition to hide the timer and show a different message when the countdown is complete
- Use conditional formatting to change colors when the timer is close to zero for urgency
- Test the timer by setting the target date to 2-3 minutes in the future to verify the full cycle
- Consider time zones if your users are global — store the target date in UTC
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to build a live countdown timer in Bubble.io that counts down to a specific date and shows days, hours, minutes, and seconds updating in real time. Can you walk me through the custom states, date math, and workflow setup?
Create a countdown timer on my page that counts down to a target date. Show days, hours, minutes, and seconds updating every second. Stop the timer and show a message when it reaches zero.
Frequently asked questions
Does the countdown timer use Workload Units?
The timer runs entirely client-side using custom states and date math, so it does not consume server-side Workload Units. The only WU cost is if the target date is loaded from the database.
Will the timer keep running when the tab is in the background?
Browsers throttle JavaScript timers in background tabs. The timer will appear to pause but will show the correct time when the user returns to the tab because it recalculates from the current date.
Can I count down to a user-specific date?
Yes. Store the target date in a field on the User Data Type or a related record, and set the target_date custom state to that dynamic value on page load.
How do I make the timer work across time zones?
Store the target date in UTC. Bubble automatically converts dates to the user's local timezone when displaying, so the countdown will be accurate regardless of where the user is.
Can I trigger a workflow when the timer reaches zero?
Yes. Use the second Do When Condition Is True event described in Step 4 to trigger any workflow action — show a popup, enable a purchase button, redirect to a page, or create a database record.
Is there a plugin that handles countdown timers?
Yes, there are countdown timer plugins on the Bubble marketplace. However, building it with custom states gives you full control over styling and behavior. RapidDev can help you choose the best approach for your specific use case.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation