逆时针 环形进度条 element ui 改

<template>
  <div class="homeCreativity">
    <div style=" transform: rotateY(180deg); " class="test">
      <el-progress type="circle" :percentage="start" :show-text="false"></el-progress>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'name',
    props: [],
    data() {
      return {
        scrolltime: 3.2,
        num: 80,
        start: 0
      }
    },
    mounted() {
      this.numberRoll()
    },

    methods: {
      numberRoll(ele) {
        this.$nextTick(() => {
          let _this = this
          let step = _this.num / ((_this.scrolltime * 1000) / 100)
          console.log(step, 'step')
          console.log(step, 'step')
          let current = 0

          let t = setInterval(() => {
            this.start += step
            console.log(this.start)
            if (this.start > _this.num) {
              clearInterval(t)
              this.start = _this.num
              t = null
            }
            if (current === this.start) {
              return
            }
            current = this.start
            console.log(current, 'current')

            // .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
          }, 100)
        })
      }
    },
    components: {},
    filters: {}
  }
</script>

<style lang="scss" scoped>
  .homeCreativity {
    width: 768px;
    height: 168px;
    background-color: yellow;
    .test {
      width: 126px;
      height: 126px;
    }
  }
</style>