<h4>sass版</h4>
<ul class="sass-loading">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<h4>css变量版</h4>
<ul class="var-loading">
    <li style="--line-index: 1"></li>
    <li style="--line-index: 2"></li>
    <li style="--line-index: 3"></li>
    <li style="--line-index: 4"></li>
    <li style="--line-index: 5"></li>
    <li style="--line-index: 6"></li>
    <li style="--line-index: 7"></li>
    <li style="--line-index: 8"></li>
    <li style="--line-index: 9"></li>
</ul>
* {
  list-style: none;
  margin: 0;
}

.sass-loading {
    li {
      display: inline-block;
      border-radius: 3px;
      width: 6px;
      height: 30px;
      background-color: yellowgreen;
      animation: beat 1s ease-in-out infinite;
      & + li {
          margin-left: 5px;
      }
      @for $i from 1 through 5 {
        &:nth-of-type(#{$i}) {
          animation-delay: 200ms * $i;
        }
      }
    }
}

.var-loading {
    li {
      display: inline-block;
        --time: calc((var(--line-index) - 1) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1.5s ease-in-out var(--time) infinite;
        & + li {
            margin-left: 5px;
        }
    }
}

@keyframes beat {
	0%,
	100% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(.5);
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.