/* HTML: <div class="loader"></div> */
.loader {
  --s: 25px;
  --g: 5px;  
  
  height: calc(1.353*var(--s) + var(--g));
  aspect-ratio: 3;
  background:
    linear-gradient(#ff1818 0 0) left/33% 100% no-repeat,
    conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
      #fff 135deg,#666 0 270deg,#aaa 0); 
  background-blend-mode: multiply;
  --_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%/3) 100%;
  -webkit-mask-size: calc(100%/3) 100%;
          mask-size: calc(100%/3) 100%;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: l7 steps(3) 1.5s infinite;
}
@keyframes l7 {
  to {background-position: 150% 0%}
}