<div style='--c0: #ec6056; --c1: #ea2963'></div>
<div style='--c0: #86dd54; --c1: #4ba75c'></div>

$d: 3.5em;
$w: 4px;

@property --p { 
  syntax: '<integer>';
  initial-value: 0;
  inherits: true
}

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, $d);
  grid-gap: 1em;
  place-content: center;
  margin: 0;
  padding: 0 1em;
  height: 100vh;
  background: 
    repeating-linear-gradient(45deg, 
        #433d62 0 4px, #29253e 0 9px);
  font: 2.5em ubuntu mono, monospace
}

div {
  height: $d;
  box-shadow: inset 0 0 0 $w #1d1b33;
  color: #fff;
  counter-reset: p var(--p);
  animation: p 8s linear infinite;
  
  &, &::before, &::after {
    display: grid;
    border-radius: 50%
  }
  
  &::before {
    place-content: center;
    margin: -.5*$w;
    background: 
      radial-gradient(circle at 50% #{$w}, 
        var(--c0) #{$w}, transparent 0), 
      conic-gradient(var(--c0), var(--c1) calc(var(--p)*1%), transparent 0%);
    --mask: 
      linear-gradient(red, red) text, 
      radial-gradient(closest-side, 
          transparent calc(100% - 2*#{$w} - 1px), 
          red calc(100% - 2*#{$w}));
    -webkit-mask: var(--mask);
    content: counter(p) '%'
  }

  &::after {
    position: absolute;
    margin: calc(.5*#{$d} - #{$w});
    padding: $w;
    transform: rotate(calc(4grad*var(--p))) translatey(calc(.5*#{$w} - .5*#{$d}));
    box-shadow: 0 0 1px var(--c1);
    background: var(--c1);
    content: ''
  }
}

div:nth-child(2) {
  animation-duration: 5s;
  animation-delay: -4s
}

@keyframes p { 95%, 100% { --p: 100 } }