body {
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.loader {
  width: fit-content;
  font-size: 40px;
  font-family: system-ui;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px #000;
  background: radial-gradient(0.71em at 50% 1em, #000 99%, #0000 101%)
      calc(50% - 1em) 1em/2em 200% repeat-x text,
    radial-gradient(0.71em at 50% -0.5em, #0000 99%, #000 101%) 50% 1.5em/2em
      200% repeat-x text;
  animation: fill_1 0.8s linear infinite alternate, fill_2 4s linear infinite;
}

.loader::before {
  content: "Loading";
}

@keyframes fill_1 {
  to {
    background-position-x: 50%, calc(50% + 1em);
  }
}

@keyframes fill_2 {
  to {
    background-position-y: -0.5em, 0;
  }
}