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

#l1 {
  background: conic-gradient(#000 0 0) 0/0% 100% no-repeat text;
  animation: l1 1s linear infinite;
}
@keyframes l1 {
  to{background-size: 120% 100%}
}
#l2 {
  font-family: monospace;
  background: conic-gradient(#000 0 0) 0/0 100% no-repeat text;
  animation: l2 2s steps(8,jump-none) infinite;
}
@keyframes l2 {
  to {background-size: 100% 100%}
}
#l3 {
  line-height: 1.5;
  background:
    radial-gradient(1.13em at 50% 1.6em,#000 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100% text,
    radial-gradient(1.13em at 50% -0.8em,#0000 99%,#000 101%) 50% .8em/3.2em 100% repeat-x  text;
  animation: l3 2s linear infinite;
}
@keyframes l3 {
  to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
}
#l4 {
  font-family: monospace;
  --g:conic-gradient(#000 0 0) no-repeat text;
  background:var(--g) 0,var(--g) 1ch,var(--g) 2ch,var(--g) 3ch,var(--g) 4ch,var(--g) 5ch,var(--g) 6ch;
  background-position-y: bottom;
  animation: l4 3s infinite;
}
@keyframes l4 {
  0%     {background-size: 1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  14.28% {background-size: 1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  28.57% {background-size: 1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  42.85% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  57.14% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   }
  71.43% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   }
  85.71% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   }
  100%   {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%}
}
.loader {
  margin: auto;
  font-size: 50px;
  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;
}