Skip to content

Instantly share code, notes, and snippets.

@lalyos
Created March 27, 2022 19:21
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save lalyos/5959419f3e73940b233223b80f948ca2 to your computer and use it in GitHub Desktop.
Quick pure CSS counter
- let d = 100, o = -.5*d;
- let sw = .1*d, r = .5*(d - sw);
- let len = 2*Math.PI*r;
.countdown
svg(viewBox=[o, o, d, d].join(' ') stroke-width=sw)
circle(r=r)
circle(r=r stroke-dasharray=len stroke-dashoffset=`${len}px`)
$d: 20em;
$t: 20;
$c: #8A9B0F #F8CA00 #E97F02 #BD1550 #490A3D;
$n: length($c);
$u: 100%/($n - 1);
.countdown {
display: grid;
margin: 1em auto;
width: $d; height: $d;
&::after {
grid-column: 1;
grid-row: 1;
place-self: center;
font: #{.25*$d}/ 2 ubuntu mono, consolas, monaco, monospace;
animation: num $t*1s steps(1) infinite;
content: '0:' counter(s, decimal-leading-zero)
}
}
@keyframes num {
@for $i from 0 through $t {
#{$i*100%/$t} { counter-reset: s $t - $i }
}
}
svg {
grid-column: 1;
grid-row: 1
}
[r] {
fill: none;
stroke: silver;
+ [r] {
transform: rotate(-90deg);
stroke-linecap: round;
stroke: nth($c, 1);
animation: arc $t*1s linear infinite;
animation-name: arc, col
}
}
@keyframes arc {
0% { stroke-dashoffset: 0px }
}
@keyframes col {
@for $i from 0 to $n {
#{$i*$u} { stroke: nth($c, $i + 1) }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment