SOURCE

<div class="heart-loading flex-ct-x">
  <ul style="--line-count: 9">
    <li class="line-1" :style="--line-index: 1"></li>
    <li class="line-2" :style="--line-index: 2"></li>
    <li class="line-3" :style="--line-index: 3"></li>
    <li class="line-4" :style="--line-index: 4"></li>
    <li class="line-5" :style="--line-index: 5"></li>
    <li class="line-6" :style="--line-index: 6"></li>
    <li class="line-7" :style="--line-index: 7"></li>
    <li class="line-8" :style="--line-index: 8"></li>
    <li class="line-9" :style="--line-index: 9"></li>
  </ul>
</div>

.heart-loading {
  width: 200px;
  height: 200px;
  ul {
    display: flex;
    justify-content: space-between;
    width: 150px;
    height: 10px;
    displ
  }
  li {
    list-style: none;
    --Θ: calc(var(--line-index) / var(--line-count) * 0.5turn);
    --time: calc((var(--line-index) - 1) * 40ms);
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background-color: #3c9;
    filter: hue-rotate(var(--Θ));
    animation-duration: 1s;
    animation-delay: var(--time);
    animation-iteration-count: infinite;
  }
  .line-1,
  .line-9 {
    animation-name: line-move-1;
  }
  .line-2,
  .line-8 {
    animation-name: line-move-2;
  }
  .line-3,
  .line-7 {
    animation-name: line-move-3;
  }
  .line-4,
  .line-6 {
    animation-name: line-move-4;
  }
  .line-5 {
    animation-name: line-move-5;
  }
}