Circular Countdown CSS Animation

by vovkasolovev

HTML

<div class="thumb"></div>

<div class="banner_thumbs">
<div class="thumb active"></div>
</div>

CSS

@property --timer-value{ syntax: '<number>';  inherits: true;   initial-value: 0;}
.thumb {--timer-value:100; --timer-border:3px; --timer-color:darkred; --timer-width:20px;  width:var(--timer-width); aspect-ratio:1; position:relative; display:inline-grid; animation:ani_timer 2s .5s both;}
.thumb:before{content:""; position:absolute; border-radius:50%;}
.thumb:before {inset:0; 
background: conic-gradient(var(--timer-color) calc(var(--timer-value)*1%),#0000 0);
-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--timer-border)),#000 calc(100% - var(--timer-border)));
mask:radial-gradient(farthest-side,#0000 calc(99% - var(--timer-border)),#000 calc(100% - var(--timer-border)));}
@keyframes ani_timer {from{--timer-value:0}}


@property --timer-value{ syntax: '<number>';  inherits: true;   initial-value: 0;}
.banner_thumbs .thumb {width:15px!important; height:15px!important; margin:5px; border-radius:10px; box-shadow:0 0 1px black; background:#1177ff }
.banner_thumbs .thumb.active { --timer-value:110; --timer-border:2px; --timer-color:white; aspect-ratio:1; position:relative; display:inline-grid; animation:ani_timer 8.4s .5s linear both;}
.banner_thumbs .thumb.active:before{content:""; position: absolute; border-radius:50%; width:17px;aspect-ratio:1; left: -1px; top: -1px; }
.banner_thumbs .thumb.active:before { 
background: conic-gradient(from 0.05turn, 
#0000 calc( (var(--timer-value) * 1% ) - 40%), 
var(--timer-color) calc( (var(--timer-value) * 1% ) + 0%), 
#0000 calc( (var(--timer-value) * 1% ) + 3%), 
#0000 calc( (var(--timer-value) * 1% ) + 60%), 
var(--timer-color) calc( (var(--timer-value) * 1% ) + 100%));
-webkit-mask:radial-gradient(farthest-side,#0000 calc(68% - var(--timer-border)),#000b calc(73% - var(--timer-border)),#000b 73%, #0000 78%);
mask:radial-gradient(farthest-side,#0000 calc(68% - var(--timer-border)),#000b calc(73% - var(--timer-border)),#000b 73%, #0000 78%);}
@keyframes ani_timer {from{--timer-value:10}}