A Pen by Stan Williams on CodePen.
Created
February 26, 2022 01:18
-
-
Save stanwmusic/a7e3e3bed649ade808802a66348a7164 to your computer and use it in GitHub Desktop.
CSS only Timer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment