# Custom countdown

**URL:** <https://community.glideapps.com/t/custom-countdown/38574>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [February 16, 2022, 1:10pm UTC](https://community.glideapps.com/t/custom-countdown/38574 "2022-02-16T13:10:31Z")\
**Posts on this page:** 17\
**Page:** 4

<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:** [November 10, 2022, 7:12pm UTC](https://community.glideapps.com/t/custom-countdown/38574/61 "2022-11-10T19:12:25Z")

</div>

that will not affect Glide’s action… it will sync normally

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 10, 2022, 7:13pm UTC](https://community.glideapps.com/t/custom-countdown/38574/62 "2022-11-10T19:13:14Z")

</div>

Yea but the clock style does not fit my apps style

---

<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:** [November 10, 2022, 7:13pm UTC](https://community.glideapps.com/t/custom-countdown/38574/63 "2022-11-10T19:13:50Z")

</div>

use the digit-style clock

https://codepen.io/JamesDouglas/embed/preview/RgwbRo?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=RgwbRo

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 10, 2022, 7:25pm UTC](https://community.glideapps.com/t/custom-countdown/38574/64 "2022-11-10T19:25:10Z")

</div>

I don’t know how to implement this into glide

---

<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:** [November 10, 2022, 7:26pm UTC](https://community.glideapps.com/t/custom-countdown/38574/65 "2022-11-10T19:26:14Z")

</div>

use rich text components, and template columns to substitute variables…  
I might update my template when I have time… this will take a few hours

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 10, 2022, 7:29pm UTC](https://community.glideapps.com/t/custom-countdown/38574/66 "2022-11-10T19:29:10Z")

</div>

How do I implement the HTML code into Glide?

---

<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:** [November 10, 2022, 7:29pm UTC](https://community.glideapps.com/t/custom-countdown/38574/67 "2022-11-10T19:29:46Z")

</div>

rich-text component… but only in Apps… Pages not really

you can try my Code BOOK to see more options… just click my profile

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 10, 2022, 7:33pm UTC](https://community.glideapps.com/t/custom-countdown/38574/68 "2022-11-10T19:33:04Z")

</div>

@ThinhDinh @Darren_Murphy  
If you can figure out a solution to my problem with the GitHub code, please reach out to me

---

<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:** [November 11, 2022, 2:45am UTC](https://community.glideapps.com/t/custom-countdown/38574/69 "2022-11-11T02:45:59Z")

</div>

ok… I nailed the CSS countdown LOL…

> **[StructureArt's App testing](https://sa-test2.glideapp.io/dl/1e2505)**

now the tricky part is to make it variable… no problem with the count up 😉  
but… if the time is fixed… CSS is ready

 ![countdown](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2e5db7c729b4c7158837fa0c9ee2851b545eb4f2.png)

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 11, 2022, 12:35pm UTC](https://community.glideapps.com/t/custom-countdown/38574/70 "2022-11-11T12:35:25Z")

</div>

Where can I see the code for this?

---

<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:** [November 12, 2022, 2:24am UTC](https://community.glideapps.com/t/custom-countdown/38574/71 "2022-11-12T02:24:01Z")

</div>

new version… full CSS:

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

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 12, 2022, 8:22am UTC](https://community.glideapps.com/t/custom-countdown/38574/72 "2022-11-12T08:22:48Z")

</div>

How can I see the CSS?

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 13, 2022, 12:25am UTC](https://community.glideapps.com/t/custom-countdown/38574/73 "2022-11-13T00:25:57Z")

</div>

I’m sorry @ThinhDinh but this doesn’t work. I have been toying around with it for a couple of hours, and it doesn’t work. Your code (without any changes) only works when a custom date is entered, but if you reference a date/time column it breaks, the timer says something like “NaND NaNH NaNm NaNs”.  
NaN stands for not a number, I have tried to find a solution for this, but I can’t seem to find one.  
I would really like some help because the code does not work currently.

---

<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:** [November 13, 2022, 12:40am UTC](https://community.glideapps.com/t/custom-countdown/38574/74 "2022-11-13T00:40:49Z")

</div>

it would be best if you had a CSS countdown… 😉 , and CSS animated control over Glide elements… I did a sample… is working well… now I need to stabilize it, in case someone clicks some other tab and returns… a lot of work LOL, I did not expect that.

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 13, 2022, 10:40am UTC](https://community.glideapps.com/t/custom-countdown/38574/75 "2022-11-13T10:40:37Z")

</div>

Can you be a bit more specific on how to implement HTML and CSS to glide? I know how to do it with CSS, but with HTML you have to add ( & ). And right now it is not working.

---

<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:** [November 13, 2022, 11:16pm UTC](https://community.glideapps.com/t/custom-countdown/38574/76 "2022-11-13T23:16:11Z")

</div>

i posted the code above… all you have to do is to copy and paste… then modify to your needs.

---

<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:** [November 13, 2022, 11:18pm UTC](https://community.glideapps.com/t/custom-countdown/38574/77 "2022-11-13T23:18:06Z")

</div>

here… i combined HTML and CSS for you from that post… just add rich text component and paste it there…

```auto
<div class="clock">
  <ol class="first">
    <li>00:</li>
    <li>01:</li>
  </ol>
  <ol class="tens">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>0</li>
 </ol>
 <ol class="digits">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
 </ol>
</div>

<pre><span><style>

ol.tens, .digits, .first {
  list-style-type: none;
  margin:0;
  padding:3px;
  position: relative;
  display: inline-block;
}
ol.first {
  margin-right: 12px;
}
.tens li, .digits li, .first li {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}
.first li:nth-of-type(2) {
  animation: minutecount 60s ease-in-out 0s 1;
}

.tens li:nth-of-type(2) {
  animation: tenscount 60s ease-in-out 51s 1;
}
.tens li:nth-of-type(3) {
  animation: tenscount 60s ease-in-out 41s 1;
}
.tens li:nth-of-type(4) {
  animation: tenscount 60s ease-in-out 31s 1;
}

.tens li:nth-of-type(5) {
  animation: tenscount 60s ease-in-out 21s 1;
}

.tens li:nth-of-type(6) {
  animation: tenscount 60s ease-in-out 11s 1;
}

.tens li:nth-of-type(7) {
  animation: tenscount 60s ease-in-out 1s 1;
}

.digits li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 10s 6;
}

.digits li:nth-of-type(2) {
  animation: digitcount 10s ease-in-out 9s 6;
}

.digits li:nth-of-type(3) {
  animation: digitcount 10s ease-in-out 8s 6;
}

.digits li:nth-of-type(4) {
  animation: digitcount 10s ease-in-out 7s 6;
}

.digits li:nth-of-type(5) {
  animation: digitcount 10s ease-in-out 6s 6;
}

.digits li:nth-of-type(6) {
  animation: digitcount 10s ease-in-out 5s 6;
}

.digits li:nth-of-type(7) {
  animation: digitcount 10s ease-in-out 4s 6;
}

.digits li:nth-of-type(8) {
  animation: digitcount 10s ease-in-out 3s 6;
}

.digits li:nth-of-type(9) {
  animation: digitcount 10s ease-in-out 2s 6;
}

.digits li:nth-of-type(10) {
  animation: digitcount 10s ease-in-out 0.7s 6;
}

@keyframes digitcount {
  0% {
    opacity: 1
  }
  9.9% {
    opacity: 1
  }
  10% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes tenscount {
  0% {
    opacity: 1
  }
  0.9% {
    opacity: 1
  }
  2% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes minutecount {
  0% { opacity: 1; }
  2.8% { opacity: 1; }
  2.9% { opacity: 0; }
  100% { opacity: 0; }
}

```

[Previous page](https://community.glideapps.com/t/custom-countdown/38574.md?page=3)