自定义进度条 -Vue2 版本

背景：基于内部OA系统任务进度，自定义的一个动态效果的进度条。

1. 实现方式 - 组件封装

<template>
  <div class="wrap">
    <div class="progress-bar">
      <div class="progress"></div>
      <div class="inner" :style="{'--left':progress + '%'}"></div>
      <div class="runner" :style="{'--left':progress + '%'}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    progress: {
      type: [Number,String],
      default: '0'
    }
  },
  data(){
    return{

    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  position: relative;
  height: 40px;
}
.progress-bar {
  position: absolute;
  top: 23px;
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background-color: rgb(255,237,212);
  .inner{
    position: absolute;
    top: 0;
    z-index: 10;
    border-radius: 6px;
    height: 100%;
    background: #f28e01;
    transition: left 1s ease-in-out;
    animation: changeWidth 1s forwards linear,shrink 1s linear infinite;
    background-image: url(~@/assets/images/progress-item.png);
  }
}
.progress {
  width: 0%;
  height: 100%;
  background-color: #00aaff;
  transition: width 1s ease-in-out;

}
.runner {
  width: 60px;
  height: 24px;
  background-image: url(~@/assets/images/run.gif) ;
  background-size: contain;
  position: absolute;
  top: -22px;
  transition: left 1s ease-in-out;
  animation: run 1s forwards linear;
  margin-left: -55px;
}
@keyframes run {
  0% { left: 0; }
  100% { left: var(--left); }
}
@keyframes changeWidth {
  0% { width: 0; }
  100% { width: var(--left); background-position: 40px 0}
}
@keyframes shrink {
  0% { background-position: 0 0}
  100% {  background-position: 40px 0}
}
</style>

2. 引入并使用

<TaskProgress :progress="90"/>

3. 实现效果

4. 资源文件

 （动态gif）

  （静态进度条片段）