.loader {
  --s: 25px;
  --g: 5px;

  width: calc(3 * (1.353 * var(--s) + var(--g)));
  aspect-ratio: 3;
  background:
    linear-gradient(#6200ff 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%;
  }
}