手写环形进度条

• Vue2.x
• Scss
• 该环形可根据css配置颜色、半径
• 可自行增加居中文字等
• 只需要传入百分比即可

环形进度条由两个半圆环组成，根据圆环的角度调整，来表示进度。

Vue

<div class="circle-progress red">
  <div class="wrapper right">
    <div class="circle-progress-bar circle-right" :style="renderRightRate(80)"></div>
  </div>
  <div class="wrapper left">
    <div class="circle-progress-bar circle-left" :style="renderLeftRate(80)"></div>
  </div>
  <p>进度条</p>
</div>

Scss

 .circle-progress {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    width: 100px;
    height: 100px;

    & .circle-progress-bar {
        width: 200%;
        height: 100%;
        box-sizing: border-box;
        border: 12px solid rgba(245, 108, 108, 0.15);  // 底色 可自行修改
        border-radius: 50%;
        position: absolute;
        top: 0;
        transform: rotate(45deg);
    }

    & .circle-right {
        border-top: 12px solid rgba(245, 108, 108, 1);   // 圆环颜色 可自行修改
        border-right: 12px solid rgba(245, 108, 108, 1);   // 圆环颜色 可自行修改
        right: 0;
    }

    & .circle-left {
        border-bottom: 12px solid rgba(245, 108, 108, 1);
        border-left: 12px solid rgba(245, 108, 108, 1);
        left: 0;
    }
}

JS

    /**
     * 环形进度条 左
     * @param {String} rate 进度
     */
    renderLeftRate(rate) {
      const deg = Number(rate) * 3.6
      let reDeg = 0
      if (deg >= 180) {
        reDeg = deg - 315
        return 'transform: rotate(' + reDeg + 'deg);'
      } else {
        reDeg = deg - 135
        return 'transform: rotate(-135deg);'
      }
    },
    /**
     * 环形进度条 右边
     * @param {String} rate 进度
     */
    renderRightRate(rate) {
      const deg = Number(rate) * 3.6
      let reDeg = 0
      if (deg >= 180) {
        reDeg = deg - 315
        return 'transform: rotate(45deg);'
      } else {
        reDeg = deg - 135
        return 'transform: rotate(' + reDeg + 'deg);'
      }
    }