.loader {
  width: 100px;
  height: 100px;
  display: grid;
  color: hsl(204, 86%, 69%);
}

.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  --c1: linear-gradient(90deg,rgb(247, 247, 247) calc(100%/3),currentColor 0 calc(2*100%/3),rgb(247, 247, 247) 0);
  --c2: linear-gradient( 0deg,rgb(247, 247, 247) calc(100%/3),currentColor 0 calc(2*100%/3),rgb(247, 247, 247) 0);
  background: var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size: 300% 8px,8px 300%;
  background-repeat: no-repeat;
  animation: l1 1s infinite linear;
}

.loader:after {
  margin: 10px;
  transform: scaleX(-1);
  animation-delay: -.25s;
}

@keyframes l1 {
  0% {
    background-position: 50%  0,100% 100%,0    100%,0 0
  }

  25% {
    background-position: 0    0,100% 50% ,0    100%,0 0
  }

  50% {
    background-position: 0    0,100% 0   ,50%  100%,0 0
  }

  75% {
    background-position: 0    0,100% 0   ,100% 100%,0 50%
  }

  75.01% {
    background-position: 100% 0,100% 0   ,100% 100%,0 50%
  }

  100% {
    background-position: 50%  0,100% 0   ,100% 100%,0 100%
  }
}