{"id":2424,"date":"2024-05-29T10:40:25","date_gmt":"2024-05-29T16:40:25","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2424"},"modified":"2024-05-29T10:40:26","modified_gmt":"2024-05-29T16:40:26","slug":"how-to-make-a-css-timer","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/how-to-make-a-css-timer\/","title":{"rendered":"How to Make a CSS Timer"},"content":{"rendered":"\n

There are times<\/em> when we can use a timer<\/em> on websites. \ud83d\ude09<\/p>\n\n\n\n

Perhaps we want to time a quiz or put pressure on a survey. Maybe we are just trying to making a dramatic countdown after a user has done something great like successfully booking a concert ticket. We could be trying to build a micro time management tool (think Pomodoro<\/em>). Or it could just be an alternative to a spinner UI. <\/p>\n\n\n\n

When those situations come up, I have no qualms employing JavaScript which is probably a more powerful tool for this sort of thing generally. And yet! CSS substitutes are just as fun and efficient when the simplest option is the best one.\u00a0Some email clients these days are highly CSS capable, but would never run JavaScript, so perhaps that situation could be an interesting progressive enhancement.<\/p>\n\n\n\n

Let’s take a look at what it takes to cook up a CSS timer. We’ll use some modern CSS tech to do it. The ingredients?<\/p>\n\n\n\n

    \n
  1. CSS Counters<\/li>\n\n\n\n
  2. @property<\/li>\n\n\n\n
  3. pseudo elements<\/li>\n\n\n\n
  4. @keyframes<\/li>\n\n\n\n
  5. A little Celtic sea salt to taste<\/li>\n<\/ol>\n\n\n\n

    To get started, fire up a (Code)Pen<\/a> and keep it warm. Below is the demo we\u2019ll be working towards (later, I\u2019ll show some stylized examples):<\/p>\n\n\n\n