VUE2 环形进度条（百分比动态加载）

最新推荐文章于 2024-05-21 09:38:48 发布

weixin_47272853

最新推荐文章于 2024-05-21 09:38:48 发布

阅读量852

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47272853/article/details/130614486

版权

html部分

  <div class="percentloop" v-if="showPersent">
    <div class="percentloop">
      <div class="circle-left">
        <div :style="{ transform: 'rotate(' + transformLeft + 'deg)' }"></div>
        {{ transformLeft }}
      </div>
      <div class="circle-right">
        <div :style="{ transform: 'rotate(' + transformRight + 'deg)' }"></div>
      </div>
      <div class="number">
        {{ percentNum }} %
      </div>
    </div>
  </div>

js部分

props: {
    percentNum: {
      type: [String, Number],
      default: 0
    },
    showPersent: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    transformLeft() {
      let deg = 0
      if (this.percentNum >= 100) {
        deg = 180
      } else if (this.percentNum >= 50) {
        deg = parseInt(360 * this.percentNum / 100) - 180
      }
      return deg
    },
    transformRight() {
      let deg = 0
      if (this.percentNum >= 50) {
        deg = 180
      } else {
        deg = parseInt(360 * this.percentNum / 100)
      }
      return deg
    }
  }

css部分

.percentloop {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0000005e;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .percentloop {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: calc(50% - 150px) calc(50% - 75px);

    .circle-left,
    .circle-right {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(15deg, rgb(56, 190, 235), blue);
      overflow: hidden;

      &>div {
        width: 100%;
        height: 100%;
        background-color: #8a8a8a;
        transform-origin: right center;
        transition: all .5s linear;

      }
    }

    .circle-right {
      left: 50%;
      background: linear-gradient(20deg, rgb(33, 168, 214), blue);

      &>div {
        transform-origin: left center;
      }
    }

    .number {
      position: absolute;
      top: 9%;
      bottom: 9%;
      left: 9%;
      right: 9%;
      background-color: #fff;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
    }
  }
}