<div class="loader" id="l1">Loading</div>
<div class="loader" id="l2">Loading</div>

#l1 {
  background: 
    linear-gradient(-60deg,#0000 45%,#000 0 55%,#0000 0) 
    left/300% 100% no-repeat text;
  animation: l1 2s linear infinite;
}
@keyframes l1 {
  0% {background-position: right}
  to {background-position: left}
}
#l2 {
  font-family: monospace;
  background: conic-gradient(#000 0 0) 0/1ch 100% no-repeat text;
  animation: l2 1.5s steps(7) infinite alternate;
}
@keyframes l2 {
  0% {background-position: 0               }
  to {background-position: calc(100% + 1ch)}
}

.loader {
  margin: auto;
  font-size: 60px;
  font-family: system-ui,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px #000;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-template-columns: auto auto;
  gap: 50px;
}