Simple Html Css Countdown | Countdown Timer Html, Css Code

Simple Html Css Countdown | Countdown Timer Html, Css Code

In this article, we create a simple countdown project using only html 🔥and css. Yes, we do not use any library or javascript code for the 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 project🤯 Using Html🔥.

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 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

html css timer

Let’s Write Css Code.

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

html css countdown timer

html css countdown timer

You can see this output👆, and understand how our countdown 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 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

Share on:

Leave a Comment