Countdown Timer Using Html & Css

Create a Countdown Timer Using HTML & CSS

Create a Countdown Timer Using HTML & CSS

In this article, we create a Simple Countdown Timer project using only html 🔥and css. Yes, we do not use any library or javascript code for the Countdown Timer. Pure HTML & CSS Countdown Timer Project with complete code. So let’s start writing html code then style and give countdown functionality using only css🤯.

Let’s create the basic structure of our Countdown Timer Project🤯 Using Html🔥.

Code byt_afif
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNO
ResponsiveYES
Countdown Timer Table

Html Code

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Css Only Timer</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>
   <h2>Click 👇 to start/pause the timer</h2>
   <input type="checkbox" id="go">
   <label class="timer" for="go">
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
   </label>
</body>

</html>

This is the Html code for our countdown Timer project. We use boilerplate Code and then link css file so the next step is just code in css file. And we use an input type checkbox so we can determine timer start or not then use some div in labels. So this is just a basic code structure using Html.

We see 👀 output below with only Html code than writing css code for complete styling and for countdown too.

Html Output

Countdown Timer Using HTML & CSS
Countdown Timer Using HTML & CSS

Let’s Write Css Code for styling the Countdown Timer.

Css Code 

@property --n {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --t {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
@property --r {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
@property --b {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
@property --l {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}

.d {
  width: 77px; /* size */
  display: inline-grid;
  aspect-ratio: 0.55;
}
.d:before,
.d:after {
  content: "";
  padding: 20%;
  background: conic-gradient(from -45deg at 50% 45%, var(--t) 90deg, #0000 0),
    conic-gradient(from 45deg at 55% 50%, var(--r) 90deg, #0000 0),
    conic-gradient(from 135deg at 50% 55%, var(--b) 90deg, #0000 0),
    conic-gradient(from 225deg at 45% 50%, var(--l) 90deg, #0000 0);
  --m: conic-gradient(#000 0 0) content-box, conic-gradient(#000 0 0);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  clip-path: polygon(
    25% 0,
    75% 0,
    100% 25%,
    100% 75%,
    75% 100%,
    25% 100%,
    0 75%,
    0 25%
  );
  transition: --t 0.45s, --l 0.45s, --b 0.45s, --r 0.45s;
}
.d:after {
  margin-top: -20%;
  --t: #0000;
}
.d {
  --1: (var(--n) - 1) * (var(--n) - 1);
  --2: (var(--n) - 2) * (var(--n) - 2);
  --3: (var(--n) - 3) * (var(--n) - 3);
  --4: (var(--n) - 4) * (var(--n) - 4);
  --5: (var(--n) - 5) * (var(--n) - 5);
  --6: (var(--n) - 6) * (var(--n) - 6);
  --7: (var(--n) - 7) * (var(--n) - 7);
  --8: (var(--n) - 8) * (var(--n) - 8);
  --9: (var(--n) - 9) * (var(--n) - 9);
}

.d:before {
  --t: rgb(
    clamp(30, var(--1) * var(--4) * 999, 250)
      clamp(30, var(--1) * var(--4) * 999, 250) 30
  );
  --r: rgb(
    clamp(30, var(--5) * var(--6) * 999, 250)
      clamp(30, var(--5) * var(--6) * 999, 250) 30
  );
  --b: rgb(
    clamp(30, var(--n) * var(--1) * var(--7) * 999, 250)
      clamp(30, var(--n) * var(--1) * var(--7) * 999, 250) 30
  );
  --l: rgb(
    clamp(30, var(--1) * var(--2) * var(--3) * var(--7) * 999, 250)
      clamp(30, var(--1) * var(--2) * var(--3) * var(--7) * 999, 250) 30
  );
}
.d:after {
  --r: rgb(clamp(30, var(--2) * 999, 250) clamp(30, var(--2) * 999, 250) 30);
  --b: rgb(
    clamp(30, var(--1) * var(--4) * var(--7) * 999, 250)
      clamp(30, var(--1) * var(--4) * var(--7) * 999, 250) 30
  );
  --l: rgb(
    clamp(
        30,
        var(--1) * var(--3) * var(--4) * var(--5) * var(--7) * var(--9) * 999,
        250
      )
      clamp(
        30,
        var(--1) * var(--3) * var(--4) * var(--5) * var(--7) * var(--9) * 999,
        250
      )
      30
  );
}
.timer .d:nth-child(1) {
  animation: d6 3600s linear infinite;
}
.timer .d:nth-child(2) {
  animation: d9 600s linear infinite;
}
.timer .d:nth-child(3) {
  animation: d6 60s linear infinite;
  grid-column: 4;
}
.timer .d:nth-child(4) {
  animation: d9 10s linear infinite;
}
@keyframes d9 {
  0%,
  9.95% {
    --n: 0;
  }
  10%,
  19.95% {
    --n: 1;
  }
  20%,
  29.95% {
    --n: 2;
  }
  30%,
  39.95% {
    --n: 3;
  }
  40%,
  49.95% {
    --n: 4;
  }
  50%,
  59.95% {
    --n: 5;
  }
  60%,
  69.95% {
    --n: 6;
  }
  70%,
  79.95% {
    --n: 7;
  }
  80%,
  89.95% {
    --n: 8;
  }
  90%,
  99.95% {
    --n: 9;
  }
}
@keyframes d6 {
  0%,
  16.64% {
    --n: 0;
  }
  16.67%,
  33.30% {
    --n: 1;
  }
  33.33%,
  49.96% {
    --n: 2;
  }
  50.00%,
  66.63% {
    --n: 3;
  }
  66.67%,
  83.30% {
    --n: 4;
  }
  83.33%,
  99.97% {
    --n: 5;
  }
}

.timer {
  display: grid;
  cursor: pointer;
  grid-template-columns: 1fr 1fr 15px 1fr 1fr;
  grid-gap: 15px;
  background: linear-gradient(rgb(250 250 30) 0 0) 50% 30%/15px 15px no-repeat,
    linear-gradient(rgb(250 250 30) 0 0) 50% 70%/15px 15px no-repeat;
}
#go {
  display: none;
}
#go ~ .timer .d {
  animation-play-state: paused;
}
#go:checked ~ .timer .d {
  animation-play-state: running;
}
#go:checked ~ .timer {
  filter: hue-rotate(45deg);
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  background: #000;
}

h2 {
  color: #fff;
  font-family: sans-serif;
  margin: 0 auto 20px;
}

This is all our long Css code for the countdown project. We use many new selectors in css code @property.we use aspects ration, before, after, mask tag, and many new things. Then we use clamp(this is a function in css like we have a function in javascript). Then we use nth-child selector to style every div into labels. Then simply use Keyframe animation to start the countdown project.

Final Output

Countdown Timer Using HTML & CSS
Countdown Timer Using HTML & CSS
Countdown Timer Using HTML & CSS
Countdown Timer Using HTML & CSS

You can see this output👆, and understand how our Countdown Timer Project works when we click on a timer, the timer is start,and when we click again timer pause. And the Timer color is yellow but when we start the timer it’s green color. That’s it for the Html Css Countdown Timer Project Code.

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

Quiz Project Using Javascript

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – @t_afif

written by – Codewithrandom

Which code editor do you use for this Countdown Timer coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

YES! this is a responsive project

Do you use any external links to create this project?

No!



Leave a Reply