1、css動畫效果(使用了css屬性: --line-index)

<ul class="loading">
  <li v-for="item in 5" :key="item"  :style="{'--line-index':item}"></li>
</ul>

//css樣式
.loading{
  display:flex;
  justify-content:center;
  align-items:center;
  width:200px;
  height:200px;
  list-style:none;
  
  li{
    --time:calc((var(--line-index) - 1) * 200ms);
    border-radius:3px;
    width:6px;
    height:30px;
    background-color:#f66;
    animation:running 1.5s ease-in-out var(--time) infinite;
    &+li{
      margin-left:5px;
    }
  }
}
@keyframes running{
   0%,
   100%{
     transfrom:scaleY(1);
   }
   50%{
     transform:scaleY(.5);
   }
}

//這裡會用到這兩個css屬性：  --time   和  --line-index 。(講真，從未用過這個，