HTML

<div class="demo-Box">
    <div class="loader"></div>
</div>

CSS

.demo-Box {
width:100%;
height:160px;
  display: grid;
  place-content: center;
  grid-gap: .5em;
  margin: 0;
  min-height: 300px;
  background: repeating-linear-gradient(45deg, #222 0 2px, #000 0 7px);
}

.loader {
  --f-ini: 0;
  --f-fin: 0;
  --f-hue: 0;
  position: relative;
  padding: 5em;
  border-radius: 50%;
  background: conic-gradient(from calc(var(--f-ini)*-360deg), currentcolor 0% calc(var(--f-fin)*120deg), transparent 0%);
  color: hsl(calc(var(--f-hue)*360), 100%, 75%);
  --mask: radial-gradient(transparent calc(2.25em - 1px), red 2.25em 2.75em, transparent calc(2.75em + 1px), transparent calc(3em - 1px), red 3em 3.75em, transparent calc(3.75em + 1px), transparent calc(4em - 1px), red 4em 5em, transparent calc(5em + 1px));
  -webkit-mask: var(--mask);
  mask: var(--mask);
  animation: f-ini 1s ease-out infinite, f-fin 0.5s ease-out infinite alternate, f-hue 2s linear infinite;
}
.loader:before, .loader:after {
  --i: 0;
  position: absolute;
  margin: -0.25em;
  padding: 0.25em;
  border-radius: 50%;
  transform: rotate(calc(var(--f-ini)*-360deg + var(--i)*var(--f-fin)*120deg));
  box-shadow: 0 -2.5em 1px 0em currentcolor, 0 -3.375em 1px 0.125em currentcolor, 0 -4.5em 1px 0.25em currentcolor;
  background: currentcolor;
  content: "";
}
.loader:after {
  --i: 1 ;
}
@keyframes f-ini {
  to {
    --f-ini: 1 ;
  }
}
@keyframes f-fin {
  to {
    --f-fin: 1 ;
  }
}
@keyframes f-hue {
  to {
    --f-hue: 1 ;
  }
}

js

CSS.registerProperty({
    name: '--f-ini', 
    syntax: '<number>', 
    initialValue: 1, 
    inherits: true
});

CSS.registerProperty({
    name: '--f-fin', 
    syntax: '<number>', 
    initialValue: 1, 
    inherits: true
});

CSS.registerProperty({
    name: '--f-hue', 
    syntax: '<number>', 
    initialValue: 1, 
    inherits: true
});

效果预览