<div class="classic"></div>
<div class="classic alt"></div>

[class*=classic]:before {
  content:"Loading...";
  font-weight: bold;
}

.classic {
  font-family: monospace;
  font-size: 30px;
  color: #0000;
  background:linear-gradient(90deg,red calc(50% + 0.5ch),#000 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: c1 2s infinite steps(11);
}
.alt {
  background: linear-gradient(90deg,#000 calc(50% - 0.5ch),red 0 calc(50% + 0.5ch),#000 0) 
   right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
  background-clip:text;
}
@keyframes c1 {to{background-position: left}}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}