css loading frases em loop

#loading {
  @extend %screen;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgb(255, 211, 0), rgb(239, 78, 35));
  font-size: 33px;
  color: #fff;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;

    li {
      position: absolute;
      width: 100%;
      visibility: hidden;
    }

    $length: 7;
    $totalTime: $length * 1.5;

    @for $i from 1 through $length {
      li:nth-child(#{$i}) {
        animation: loading-text #{$totalTime}s #{($i - 1) * 1.5}s ease-in-out infinite;
      }
    }

    @keyframes loading-text {
      $second: 100 / $totalTime; 
      0% {
        transform: translateY(100%);
        visibility: visible;
        opacity: 0;
      }
      #{0.5 * $second}% {
        transform: translateY(0%);
        opacity: 1;
      }
      #{1.5 * $second}% {
        transform: translateY(0%);
        opacity: 1;
      }
      #{2 * $second}% {
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
      }
    }
  }
}