css3电池效果

css3电池效果，页面加载，从左到右增长到传入的值。
效果：

分析：
黑色的小间隔是自己画的，保证页面伸缩的时候样式不会异样，间隔是循环定位上去的，让间隔的层级最高，然后彩色的小块是循环产生的，宽度固定，撑满整个盒子，一共10个，然后，右边有一个灰色盒子，用100%-要显示的值，就是他的长度，把他定位到右边，最初给他100%，然后在生命周期中500毫秒让他缩到（100%-要显示的值）这个宽度，就可以看到动画增长的效果了；这里直接transition过度也可以实现效果了

代码：

<template>
  <div class="progressWrap">
    <div class="progressLine">
      <ul class="lineUl">
        <!-- 画间隔 -->
        <div v-for="(item,index) in lengthes" :key="index" class="cross" :style="{left:index*24+'px'}">
          <!-- <img src="/static/img/image/间隔.png" alt=""> -->
          <div class="crosses"></div>
        </div>
        <li class="lightPart" v-for="ite in colorList" :key="ite.id" :style="{background:ite.color}"></li>
        <!-- <li class="lightPart" :style="{width:value+'%'}"></li> -->
        <li class="grayPart" :style="{width:Number(100-_value)+'%',transition:'width 1s ease-out'}"></li>
        <!-- 悬浮刻度 -->
        <div class="fly-worth" :style="{left:Number(_value==0?3:_value)+'%',transition:'left 1s ease-out'}">
          <div class="dec-ine">
            {{_value+'%'}}
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>

data(){
	return{
		//色块
		colorList:[
		   {id:'a',color: "#299AF0"},
		   {id:'b',color: "#309EE6"},
		   {id:'c',color: "#29A4BF"},
		   {id:'d',color: "#36D5E8"},
		   {id:'e',color: "#50D2E2"},
		   {id:'f',color: "#41D8D8"},
		   {id:'g',color: "#3BDBEE"},
		   {id:'h',color: "#3BDBEE"},
		   {id:'i',color: "#3BDBEE"},
		   {id:'j',color: "#3BDBEE"},
		  ]
	}
},
computed:{
	//值
	_value:{
    get(){
      if(this.value>100){
        this.value = 100
      }else if(this.value<0||this.value===0){
        this.value = 0
      }else{
        return parseInt(parseInt(this.value))
      }
    }
  },
  //间隔个数
  lengthes:{
    get(){
      let arr = []
      for(var i =0;i<11;i++){
        arr.push(i)
      }
      return arr
    }
  }
}

<style scoped lang="scss">
  .progressWrap{
    display: flex;
    .progressLine{
      display: flex;
      .lineUl{
        flex:1;
        display: flex;
        align-items: center;
        width: 240px;
        // background-image: linear-gradient(90deg,rgb(41,154,240) 30%,rgb(59,219,240));
        position: relative;
        z-index: 1;
        .cross{
          position: absolute;
          width: 3.5px;
          height: 16px;
          background: rgb(9,29,56);
          top: 0;
          z-index: 999;
          img{
            height:18px;
          }
          .crosses{
            width: 100%;
            height:100%;
            position: relative;
          }
          .crosses::before{
            content:'';
            display: block;
            width: 0px;
            height: 0px;
            border:4px solid rgb(9,29,56);
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            position: absolute;
            top: 0;
            left: -2px;
          }
          .crosses::after{
            content:'';
            display: block;
            width: 0px;
            height: 0px;
            border:4px solid rgb(9,29,56);
            border-right-color: transparent;
            border-top-color: transparent;
            border-left-color: transparent;
            position: absolute;
            bottom: 0;
            left: -2px;
          }
        }
        li{
          // width: 22px;
          height: 16px;
        }
        .lightPart{
         width: 24px;
         z-index: 9;
        }
        .grayPart{
          position: absolute;
          right: 0;
          z-index: 99;
          background:rgb(85,85,85);
        }
        .fly-worth{
          position: absolute;
          top: -40px;
          left: 0;
          transform: translateX(-55%);
          text-align: center;
          border-radius: 10px;
          border:1px solid rgb(21,237,255);
          font-size: 20px;
          color: rgb(255,255,0);
          font-weight: 600;
          padding:0 2px;
          .dec-ine{
            position: relative;
          }
          .dec-ine::after{
            content:'';
            display: block;
            width: 2px;
            height: 10px;
            background:rgb(21,237,255) ;
            position: absolute;
            bottom: -10;
            left:50%;
          }
        }
      }
    }
  }
</style>