/* Loader container */
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Forwarding loader effect */
.loader {
  width: fit-content;
  font-size: 17px;
  font-family: monospace;
  line-height: 1.4;
  font-weight: bold;
  --c: no-repeat linear-gradient(#000 0 0);
  background: var(--c), var(--c), var(--c), var(--c), var(--c), var(--c), var(--c);
  background-size: calc(1ch + 1px) 100%;
  border-bottom: 10px solid #0000;
  position: relative;
  animation: l8-0 3s infinite linear;
  clip-path: inset(-20px 0);
}

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

.loader::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 14px;
  background: #25adda;
  left: -10px;
  bottom: 100%;
  animation: l8-1 3s infinite linear;
}

@keyframes l8-0 {
  0%, 12.5% {
    background-position:
      calc(0*100%/6) 0, calc(1*100%/6) 0, calc(2*100%/6) 0,
      calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0,
      calc(6*100%/6) 0;
  }
  25% {
    background-position:
      calc(0*100%/6) 40px, calc(1*100%/6) 0, calc(2*100%/6) 0,
      calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0,
      calc(6*100%/6) 0;
  }
  37.5% {
    background-position:
      calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 0,
      calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0,
      calc(6*100%/6) 0;
  }
  50% {
    background-position:
      calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px,
      calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0,
      calc(6*100%/6) 0;
  }
  62.5% {
    background-position:
      calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px,
      calc(3*100%/6) 40px, calc(4*100%/6) 0, calc(5*100%/6) 0,
      calc(6*100%/6) 0;
  }
  75% {
    background-position:
      calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px,
      calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 0,
      calc(6*100%/6) 0;
  }
  87.4% {
    background-position:
      calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px,
      calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 40px,
      calc(6*100%/6) 0;
  }
  100% {
    background-position:
      calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px,
      calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 40px,
      calc(6*100%/6) 40px;
  }
}

@keyframes l8-1 {
  100% {
    left: 115%;
  }
}