Create a CSS/JS Countdown Timer

By Chris on Code

I was watching Disney+ the other day (Mandalorian rocks!) and I saw a neat UI for auto advancing a user to the next episode. It was a button with a countdown.

I thought “Can we make that in CSS?!” Let’s go ahead and make it!

What We’ll Build

Here is our countdown timer. You can use this for a number of things. Advancing a user through your UI is the main idea here.

Final CodePen:

The Technique

We’ll be letting CSS handle the animations since CSS animations are far more performant in browsers than letting JavaScript handle the animation. The steps for creating our countdown timer look like:

  1. Create a stack of numbers
  2. Create a JavaScript interval for every second
  3. Move the stack