<div class='load'></div>

$r: 2.5em; // outer radius of ring
$b: .2*$r; // ring thickness
$u: .5*$b;
$t: 6s;
$e: cubic-bezier(.365,0,.635,1);

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

@property --r {
  syntax: '<length-percentage>';
  initial-value: 0px;
  inherits: false
}

@property --x {
  syntax: '<length-percentage>';
  initial-value: 0px;
  inherits: false
}

@property --y {
  syntax: '<length-percentage>';
  initial-value: 0px;
  inherits: false
}

html, body, div, ::after { display: grid }

html { height: 100% }

div, ::before, ::after { grid-area: 1/ 1 } 

body {
  place-items: center;
  background: #171717;
  font: 900 6em cousine;
  
  &::before {
    padding: $r + $b;
    border-radius: $b;
    box-shadow: 4px 4px 13px;
    background: linear-gradient(-45deg, #3e1c33, #814623);
    content: ''
  }
}

.load {
  counter-reset: p var(--p);
  mix-blend-mode: lighten;
  animation: p $t linear infinite;
  
  &::before, &::after {
    background: linear-gradient(-45deg, #d196dd, #fd954e)
  }
  
  &::before {
    --x: #{$u};
    --y: #{$u};
    --r: calc(100% - #{$b}); // inner radius of ring
    --rond: red calc(#{$u} - 1px), #0000 #{$u};
    --mask: 
      radial-gradient(circle at var(--x) var(--y), var(--rond)), 
      radial-gradient(closest-side, 
          #0000 var(--r), 
          red calc(var(--r) + 1px) calc(100% - 1px), 
          #0000), 
      conic-gradient(red calc(var(--p)*1%), #0000 0%), 
      radial-gradient(circle at 50% #{$u}, var(--rond));
    padding: $r; // outer radius of ring
    -webkit-mask: var(--mask);
            mask: var(--mask);
    -webkit-mask-composite: source-over, source-in;
            mask-composite: add, intersect;
    animation: r $t ease-out infinite, 
      x .25*$t $e -.125*$t infinite alternate, 
      y .25*$t $e infinite alternate;
    content: ''
  }
  
  &::after {
    place-items: center;
    -webkit-background-clip: text;
    color: #0000;
    mix-blend-mode: difference;
    content: counter(p) '%'
  }
}

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

@keyframes r {
  0%, 50% { --r: calc(100% - #{$b}) }
  75%, 100% { --r: -1px }
}

@keyframes x { 100% { --x: calc(100% - #{$u}) } }
@keyframes y { 100% { --y: calc(100% - #{$u}) } }