SOURCE

<div class='loader'>
  <div class='loading-square'></div>
  <div class='loading-square'></div>
  <div class='loading-square'></div>
  <div class='loading-square'></div>
</div>

$color-primary: #97c900;
$color-secondary: #15668a;
$color-darkAccent: #D53A33;
$color-lightAccent: #E79C10;
$background: #222222;
$duration: 1.5s;

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: $background;
}

.loader {
  display: block;
  position: relative;
  height: 20px;
  width: 86px;
}

.loading-square {
  position: absolute;
  height: 20px;
  width: 20px;
  top: 0;
}

.loading-square:nth-child(1) {
  left: 0;
  animation: square1 $duration linear forwards infinite;
}

.loading-square:nth-child(2) {
  left: 22px;
  animation: square2 $duration linear forwards infinite;
}

.loading-square:nth-child(3) {
  left: 44px;
  animation: square3 $duration linear forwards infinite;
}

.loading-square:nth-child(4) {
  left: 66px;
  animation: square4 $duration linear forwards infinite;
}

@keyframes square1 {
  0% {
    background-color: $color-primary;
    transform: translate(0, 0);
  }
  9.09091% {
    transform: translate(0, calc(-100% - 2px));
    background-color: $color-primary;
  }
  18.18182% {
    transform: translate(calc(100% + 2px), calc(-100% - 2px));
    background-color: $color-secondary;
  }
  27.27273% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: $color-secondary;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square2 {
  0% {
    background-color: $color-secondary;
    transform: translate(0, 0);
  }
  18.18182% {
    transform: translate(0, 0);
  }
  27.27273% {
    transform: translate(0, calc(100% + 2px));
    background-color: $color-secondary;
  }
  36.36364% {
    transform: translate(calc(100% + 2px), calc(100% + 2px));
    background-color: $color-darkAccent;
  }
  45.45455% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: $color-darkAccent;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square3 {
  0% {
    background-color: $color-darkAccent;
    transform: translate(0, 0);
  }
  36.36364% {
    transform: translate(0, 0);
  }
  45.45455% {
    transform: translate(0, calc(-100% - 2px));
    background-color: $color-darkAccent;
  }
  54.54545% {
    transform: translate(calc(100% + 2px), calc(-100% - 2px));
    background-color: $color-lightAccent;
  }
  63.63636% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: $color-lightAccent;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square4 {
  0% {
    transform: translate(0, 0);
    background-color: $color-lightAccent;
  }
  54.54545% {
    transform: translate(0, 0);
  }
  63.63636% {
    transform: translate(0, calc(100% + 2px));
    background-color: $color-lightAccent;
  }
  72.72727% {
    background-color: $color-darkAccent;
  }
  81.81818% {
    background-color: $color-secondary;
  }
  90.90909% {
    transform: translate(calc(-300% - 6px), calc(100% + 2px));
    background-color: $color-primary;
  }
  100% {
    transform: translate(calc(-300% - 6px), 0);
    background-color: $color-primary;
  }
}