A while ago, on an old project, we needed to implement a countdown timer. The specified design looked relatively simple: an outline of a circle with the number of seconds remaining inside. As the time counted down, the text would need to update, and the stroke around the circle would need to disappear at an appropriate rate so it would be completely gone when the time got to zero seconds.

I originally implemented this timer in an Ember project. For the past year, I’ve been working with React, so I decided to try my hand at re-implementing it as a React component. Read more on CSS-Animated Countdown Timer with React and TypeScript…