<div class="loader"></div>
.loader {
  --s: 70px;
  --g: 15px;
  --n: 4;
  
  width: calc(var(--n)*(1.353*var(--s) + var(--g)));
  display: grid;
  justify-items: end;
  aspect-ratio: var(--n);
  overflow: hidden;
  --_m: linear-gradient(90deg,#0000,#000 30px calc(100% - 30px),#0000);
  -webkit-mask: var(--_m);
          mask: var(--_m);
}
.loader:before { 
  content: "";
  width: calc((var(--n) + 1)*100%/var(--n));
  background:
  conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
      #fff 135deg,#666 0 270deg,#aaa 0); 
  --_m:
    linear-gradient(to bottom right,
       #0000 calc(0.25*var(--s)),#000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)),#0000 0),
    conic-gradient(from -90deg at right var(--g) bottom var(--g),#000 90deg,#0000 0);
   -webkit-mask: var(--_m);
           mask: var(--_m);
  background-size:   calc(100%/(var(--n) + 1)) 100%;
  -webkit-mask-size: calc(100%/(var(--n) + 1)) 100%;
          mask-size: calc(100%/(var(--n) + 1)) 100%;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: load 1s infinite linear;
}

@keyframes load {
  to {transform:translate(calc(100%/(var(--n) + 1)))}
}

body {
  background: #000;
  min-height: 100vh;
  display: grid;
  place-content: center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.