进度条 动态效果

组件封装：

<template>
  <!-- <div class="progressbar"> -->
  <div class="progressbar1" :id="this.id">
    <div
      :style="{ width: value2 >= 100 ? '100%' : `${value2}%` }"
      :class="[value >= 100 ? 'bar_red' : 'bar']"
    ></div>
   
    <div class="label" :style="{ left: value2 >= 100 ? '100%' : `${value2}%` }">
      <span :class="[value >= 100 ? 'finish' : 'nofinish']"></span>
      <!-- <span></span>{{ value.toFixed(0) }}% -->
    </div>
    <div class="label" :style="{ left: value2 >= 100 ? '100%' : `${value2}%` }">
      <p
        :style="{
          position: 'absolute',
          top: '-5px',
          width: '400px',
          left: value <= 20 ? '30px' : value >= 80 ? '-90px' : '-10px',
        }"
      >
        <span class="com">{{ initValue ? initValue + initUnit : initUnit }} </span
        ><span class="all">({{ value ? value.toFixed(2) + "%" : "--" }})</span>
      </p>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
export default {
  data() {
    return {
      value1: 0,
      value2: 0,
      timer: null,
    };
  },
  props: {
    value: {
      type: Number,
      default: 0,
    },
    flag: {
      type: Number,
      default: 0,
    },
    id: String,
    initUnit:String,
    initValue:[String,Number]
  },

  methods: {
    init() {
      // this.$nextTick(() => {
      this.timer = setInterval(() => {
        if (this.value2 >= 100) {
          this.value2 = 100;
          clearInterval(this.timer);
          this.timer = null;
        } else if (this.value2 >= this.value1) {
          this.value2 = this.value1;
          clearInterval(this.timer);
          this.timer = null;
        } else {
          this.value2 += 1;
        }
      }, 10);
      // });
    },
  },
  watch: {
    value: {
      handler(newVal) {
        this.value1 = newVal;
        this.value2 = 0;
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped>
.com {
  font-weight: bold;
  color: #4c7cee;
  font-size: 16px;
}
.all {
  margin-left: 5px;
  font-weight: 400;
  color: #8c8c8c;
}
.progressbar {
  /* position: relative; */
  display: block;
  width: 80%;
  height: 15px;
  padding: 10px 25px;
  border-radius: 16px;
  margin: 40px auto;
  /* -webkit-box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
    0px -3px 3px -3px rgb(0 0 0 / 25%);
  box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
    0px -3px 3px -3px rgb(0 0 0 / 25%); */
}
.progressbar1 {
  position: absolute;
  display: block;
  padding: 8px;
  border: 2px solid #e5eaf2;
  content: "";
  /* width: calc(100% - 50px);
   */
  width: 100%;
  height: 15px;
  top: 0px;
  /* left: 25px; */
  /* border-radius: 20px; */
  background: #d6e0ed;
}
.bar_red {
  position: absolute;
  display: block;
  width: 50%;
  height: 16px;
  top: 0;
  left: 0;
  /* 红色 #FF615C #FFA09C  */
  background-color: #ffa09c;
  /* border-radius: 20px; */
  background-size: 3em 3em;
  background-image: linear-gradient(
    -45deg,
    transparent 0em,
    transparent 0.7em,
    #ff615c 0.9em,
    #ff615c 2.1em,
    transparent 2.1em,
    transparent 2.9em,
    #ff615c 3.1em
  );
  /* animation: ani 1500ms infinite linear; */
  -webkit-box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
    0px -3px 3px -3px rgb(0 0 0 / 25%);
  box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
    0px -3px 3px -3px rgb(0 0 0 / 25%);
}
.bar {
  position: absolute;
  display: block;
  width: 50%;
  height: 16px;
  top: 0;
  left: 0;
  /* 红色 #FF615C #FFA09C  */
  background-color: #0077ffcc;
  /* border-radius: 20px; */
  background-size: 3em 3em;
  background-image: linear-gradient(
    -45deg,
    transparent 0em,
    transparent 0.7em,
    #0077ff 0.9em,
    #0077ff 2.1em,
    transparent 2.1em,
    transparent 2.9em,
    #0077ff 3.1em
  );
  /* animation: ani 1500ms infinite linear; */
  -webkit-box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
    0px -3px 3px -3px rgb(0 0 0 / 25%);
  box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
    0px -3px 3px -3px rgb(0 0 0 / 25%);
}
@keyframes ani {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 3em 0;
  }
}

.label_nofinish {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  /* line-height: 30px; */
  top: -7px;
  left: 0;
  /* background-color: red; */
  background: url("~@/assets/org-icon/fnishis.png") -10px 0px no-repeat;
  /* transform: translateX(-35px); */
  /* overflow: hidden; */
  /* font-size: 14px;1 */
  /* border-radius: 5px; */
  /* color: white; */
  /* text-align: center; */
}
.label_nofinish {
  position: absolute;
  display: block;
  width: 23px;
  height: 23px;
  top: -7px;
  left: 0;
  background: url("~@/assets/org-icon/fnishis.png") 0px 0px no-repeat;
}

.label_finish {
  position: absolute;
  display: block;
  width: 23px;
  height: 23px;
  top: -7px;
  left: 0;
  background: url("~@/assets/org-icon/nofnishis.png") 0px 0px no-repeat;
}
.label {
  position: absolute;
  transform: translateX(-35px);
  top: 30px;
  /* display: block;
  width: 0;
  height: 0;
  line-height: 30px;
  left: 0;
  background-color: #0077ff;
  overflow: hidden;
  font-size: 14px;
  border-radius: 5px;
  color: white;
  text-align: center; */
}
.nofinish {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -34px;
  left: 25px;
  background: url("~@/assets/org-icon/nofnishis.png") 0px -1px no-repeat;
}
.finish {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -34px;
  left: 22px;
  background: url("~@/assets/org-icon/fnishis.png") 0px -1px no-repeat;
}
</style>

注意要考虑的是，当传递进度值进来的时候，要让其从零开始计算，并且 搭配 CSS3动画进行位置的变动