SOURCE

<div class="loader">
  <span class="font-l"></span>
  <span class="font-o"></span>
  <span class="font-a"></span>
  <span class="font-d"></span>
  <span class="font-i"></span>
  <span class="font-n"></span>
  <span class="font-g"></span>
</div>

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

.loader {
  width: 30em;
  height: 3em;
  color: #fff;
  font-size: 1.5em;
  font-family: sans-serif;
  text-transform: uppercase;
  position: relative;
  animation: change-color 10s linear infinite;
}
@keyframes change-color {
  0%, 100% { color: #419693; }
  33% { color: #4fb7b4; }
  66% { color: #93d6d0; }
}

.loader span {
  height: 3em;
  position: absolute;
  left: calc((var(--n) - 1) * 15%);
  animation: moving 2s linear infinite;
  animation-delay: calc((var(--n) - 10) * 0.2s);
}

@keyframes moving {
  0% {
    filter: opacity(0);
    transform: rotate(-180deg);
    left: 100%;
  }
  
  33% {
    filter: opacity(1);
    transform: rotate(0deg);
    left: 60%;
  }
  
  66% {
    filter: opacity(1);
    transform: rotate(0deg);
    left: 40%;
  }
  
  100% {
    filter: opacity(0);
    transform: rotate(180deg);
    left: 0%;
  }
}

.loader span:nth-child(1) {
  --n: 1;
}
.loader span:nth-child(2) {
  --n: 2;
}
.loader span:nth-child(3) {
  --n: 3;
}
.loader span:nth-child(4) {
  --n: 4;
}
.loader span:nth-child(5) {
  --n: 5;
}
.loader span:nth-child(6) {
  --n: 6;
}
.loader span:nth-child(7) {
  --n: 7;
}

.font-l::before { content: "l"; }
.font-o::before { content: "o"; }
.font-a::before { content: "a"; }
.font-d::before { content: "d"; }
.font-i::before { content: "i"; }
.font-n::before { content: "n"; }
.font-g::before { content: "g"; }