# How to create a countdown timer

**URL:** https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998
**Category:** Ask for Help
**Created:** [May 22, 2023, 5:56am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998 "2023-05-22T05:56:16Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![kokoro\_koto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kokoro_koto/32/45205_2.png) [@kokoro\_koto](https://community.glideapps.com/u/kokoro_koto)
#### Post date: [May 22, 2023, 5:56am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/1 "2023-05-22T05:56:16Z")

</div>

Hello. I am a beginner with Glide. I am creating a mobile app on the free plan.

I would like to display a 2-minute countdown timer on the screen.  
If anyone knows a free and easy way to do this, please let me know.

Thank you for your attention.

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [May 22, 2023, 6:15am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/2 "2023-05-22T06:15:03Z")

</div>

> **[Delay Action - DEMO](https://delay-action-demo.glideapp.io/)**
>
> delay actions by blocking screen for a specific time

---

<div class="post-metadata">

### Author: ![kokoro\_koto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kokoro_koto/32/45205_2.png) [@kokoro\_koto](https://community.glideapps.com/u/kokoro_koto)
#### Post date: [May 22, 2023, 7:28am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/4 "2023-05-22T07:28:45Z")

</div>

Is there a way to do it for free?  
Also, I would like the countdown timer to be stopped or reset every time the button is pressed.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [May 22, 2023, 7:37am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/5 "2023-05-22T07:37:14Z")

</div>

Does it need to count down every second?

It is possible to do something with Glide date math, but because Glide only updates the time every 10 seconds, you would only see the timer change once every 10 seconds.

Would that be acceptable?

---

<div class="post-metadata">

### Author: ![kokoro\_koto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kokoro_koto/32/45205_2.png) [@kokoro\_koto](https://community.glideapps.com/u/kokoro_koto)
#### Post date: [May 22, 2023, 8:02am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/6 "2023-05-22T08:02:00Z")

</div>

It’s fine.  
Could you please provide more details?

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [May 22, 2023, 8:17am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/7 "2023-05-22T08:17:17Z")

</div>

Create 3 columns as follows:

- A User Specific Date/Time column (call this “Timer End”)
- A math column to calculate the time 2 minutes into the future: `Now + 2/1440`
- A math column to calculate the “Time Remaining”: `Timer End - Now`

To start the timer, use a button with a Set Column Values action that takes the value of the 2nd column (Now + 2 mins) and writes it into the 1st column (Timer End).

To display the count down, use a text component and point it at the Time Remaining column.

To reset, clear the value in the User Specific column.

---

<div class="post-metadata">

### Author: ![Trustin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trustin/32/88217_2.png) [@Trustin](https://community.glideapps.com/u/Trustin)
#### Post date: [May 22, 2023, 8:26am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/8 "2023-05-22T08:26:47Z")

</div>

Here’s a working timer with some imperfection.  
 ![CD Timer](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/9/59f300e0e8ff27618191179bd02d1555d7ebd804.gif)

Data

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/9/49f0b9adc9394d9023bd3cebd87c483d89912e18.png)  
Math  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/8/b8255fd56e20036c25ed13f0c3f2a3d23ee31412.png)

Feel free to clarify.

Some other related topics:

> [@Live Countdown Timer](https://community.glideapps.com/t/live-countdown-timer/21019/2):
>
> These guys might be able to help: [https://niftyimages.com/CountdownTimers](https://niftyimages.com/CountdownTimers) We use the for a lot of personalized UX needs. +1

---

<div class="post-metadata">

### Author: ![kokoro\_koto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kokoro_koto/32/45205_2.png) [@kokoro\_koto](https://community.glideapps.com/u/kokoro_koto)
#### Post date: [May 23, 2023, 5:24am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/9 "2023-05-23T05:24:10Z")

</div>

Thank you for your response. I couldn’t understand the following part no matter how hard I tried. Could you please explain it in more detail?  
What specific settings do I need to configure?

To start the timer, use a button with a Set Column Values action that takes the value of the 2nd column (Now + 2 mins) and writes it into the 1st column (Timer End).

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [May 23, 2023, 5:34am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/10 "2023-05-23T05:34:17Z")

</div>

![CleanShot 2023-05-23 at 13.32.18@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/5/05a977822871f2227c34c98be34c1cc8ec03d38c.png)

 ![CleanShot 2023-05-23 at 13.33.47@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/8/58c3a0738d3cdb8819d045eaefbd3e6e8307c9a3.png)

---

<div class="post-metadata">

### Author: ![kokoro\_koto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kokoro_koto/32/45205_2.png) [@kokoro\_koto](https://community.glideapps.com/u/kokoro_koto)
#### Post date: [May 26, 2023, 6:03am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/11 "2023-05-26T06:03:17Z")

</div>

Thank you for your assistance, @Darren_Murphy. Thanks to you, it worked out well.

And, @Trustin Could you please provide more details and perhaps use screenshots to explain?  
How should I configure each column, such as “Show Corrected Time” in the data editing screen?

---

<div class="post-metadata">

### Author: ![Trustin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trustin/32/88217_2.png) [@Trustin](https://community.glideapps.com/u/Trustin)
#### Post date: [May 26, 2023, 6:56am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/12 "2023-05-26T06:56:37Z")

</div>

I am using an unorthodox method haha. But having trouble getting the right time to display.  
If I enter 60 seconds and hit start, it shows 1:04. But if I entered 120, the time will show 2:24.  
That’s why i use [corrected time] to do some “correction” but it’s not working correctly lol.  
Here’s a template for you to play with.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3d6141efa660b8b6bc132ecef98a53c99bbbda56.png)

Or am i overcomplicating things.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/c/5cbe283c41620cd5b133eaa2e11307c16f8f22ac.png)

> **[Timer](https://go.glideapps.com/template/Zl58RmHobUdU6PJxCxWn-template-published?privateTemplateToken=pzierHe1dpCFcr65Qsrp)**

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [May 26, 2023, 7:27am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/14 "2023-05-26T07:27:39Z")

</div>

Or use the Magic! 🙃

> **[3 min countdown](https://countdown-demo.glideapp.io)**
>
> CSS blocking elements, digital timer

---

<div class="post-metadata">

### Author: ![Trustin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trustin/32/88217_2.png) [@Trustin](https://community.glideapps.com/u/Trustin)
#### Post date: [May 26, 2023, 8:56am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/15 "2023-05-26T08:56:22Z")

</div>

Hey Uzo love you enthusiasm and magic!  
But for me or some user, we are #FreeGliders learning on free plan or even trying to work within constraints and limitations as this allows room for creativity.  
CSS can do amazing stuff but I would like to see how far we can stretch Glide without css!

Glide on!

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [May 26, 2023, 9:05am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/16 "2023-05-26T09:05:00Z")

</div>

This is a free App, and I’m a master of stretching the limits 😉

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [May 26, 2023, 9:54am UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/17 "2023-05-26T09:54:36Z")

</div>

Is this one better?.. no CSS… 2 minutes as you requested…

> **[2 min countdown](https://2-min-countdown.glide.page)**

Free 😜 App.

@kokoro_koto, what do you think?

---

<div class="post-metadata">

### Author: ![ohad](https://avatars.discourse-cdn.com/v4/letter/o/f04885/32.png) [@ohad](https://community.glideapps.com/u/ohad)
#### Post date: [October 4, 2023, 2:09pm UTC](https://community.glideapps.com/t/how-to-create-a-countdown-timer/61998/18 "2023-10-04T14:09:32Z")

</div>

Hi Uzu, could you please share the CSS to hide the HOURS? Thank you.  
I need to show only the minutes and seconds.
