CSS only Timer

css-only-timer.markdown

CSS only Timer

A Pen by Stan Williams on CodePen.

License.

index.html

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

style.css

@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: .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 .45s,--l .45s,--b .45s,--r .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;
}