vue-有初始化动画的节点进度条的实现

总结最近做的一个可视化大屏项目用到的节点进度条，用vue语句+css代码实现的带有初始化动画效果

先看下效果（不会弄动图，实际实现是带初始化动画的）

1.先写html结构
解释一下层级：最外层div是一整个状态进度条；里面span是状态文字，div是进度条；进度条div里面 i 标签写节点小圆点，div写长方形的进度条。因为要加初始化动画，所以节点和进度要分开写。
直接看代码

<div class="rate_sch">
  <span v-for="countText in item.handleSituType" :key="countText" >{
  {statusText[countText]}}</span>
  <div class="status_con">
    <i class="status_dot" v-for="count in item.handleSituType" :key="count"></i>
   	<div class="status_bar"></div>
  </div> 
</div>

span标签和 i 标签需要用v-for循环写，因为页面显示几个文字和几个小圆点要根据状态处于第几个节点决定。item.handleSituType 这个值就是后台接口传过来的数字类型的1/2/3/4节点状态。