[vue] css 使用渐变 实现圆形进度条

<template>
        <div class="circle-progress"
          :style="{
            backgroud-image: getPercentStyle(percent, color)
          }">
        <div class="overlay"></div>
    </div>
</template>

<script>
export default {
  name: 'circle-progress',
  methods: {
    data () {
        return {
            percent: 40,
            color: green,
        }
    },
    getPrecentStyle(precent, color, bgColor = '#ddd') {
        let startDeg = percent > 50 ? -90 : -270;
                let computeDeg = percent > 50 ? percent -50 : percent;
                let oneDeg = 3.6;
                let deg = startDeg + oneDeg * computeDeg;
        if (precent <= 50) {
            return `linear-gradient(90deg, ${bgColor} 50%, transparent 50%), linear-gradient(${deg}deg, ${color} 50%, ${bgColor} 50%)`;
        }
        return `linear-gradient(-90deg, ${color} 50%, transparent 50%), linear-gradient(${deg}deg, ${color} 50%, ${bgColor} 50%)`;
    }  
  }
}
</script>
<style scoped>
.circle-progress {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(-90deg, red 50%, transparent 50%), linear-gradient(90deg, red 50%, #ddd 50%)
        
    }
    .circle-progress .overlay {
            border-radius: 50%;
            width: 24px;
            height: 24px;
            background-color: #FFF;
        }
</style>

实现原理

使用两个 background-color 渐变背景
一个，一半填充底色，或者颜色，另外一半透明
另外一个根据百分比进行计算，根据角度，结合前一个 显示出一个进度条效果。
中间使用一块白色圆，盖住中间部分，之露出一个进度条效果的圈圈

小于 50%

linear-gradient(90deg, #ddd 50%, transparent 50%)
上层，左侧一半是灰色，右侧透明
linear-gradient(-270deg, red 50%, #ddd 50%)
下层 样一半进度条颜色，一半灰色，右侧按照进度，将多余颜色藏在灰色背景后， 起始角度 -270

按照 50% 是 180 度 算，100% 是 360度， 1% 就是3.6度
40% 就是  40 × 3.6 = 138deg   -270 + 138 = -132deg
50% 就是  50 × 3.6 = 180deg   -270 + 180 = -90deg

整体样式就是：linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(-132deg, red 50%, #ddd 50%)

大于 50%

linear-gradient(-90deg, red 50%, transparent 50%)
上层，右侧一半是颜色，左侧透明
linear-gradient(-90deg, red 50%, #ddd 50%)
下层 一半进度条颜色，一半灰色，右侧按照进度，将多余颜色重叠， 起始角度 -90

按照 60% 计算，

60% 超过50%  再多10%， 只需要计算多出来的10%
    就是  10 × 3.6 = 36deg   -90 + 36 = -54deg
整体样式就是： linear-gradient(-90deg, red 50%, transparent 50%), linear-gradient(-54deg, red 50%, #ddd 50%)

整体样式就是： linear-gradient(-90deg, red 50%, transparent 50%), linear-gradient(-54deg, red 50%, #ddd 50%)

计算样式

    getPercentStyle(percent, color, bgColor = '#ddd') {
        let startDeg = percent > 50 ? -90 : -270;
                let computeDeg = percent > 50 ? percent -50 : percent;
                let oneDeg = 3.6;
                let deg = startDeg + oneDeg * computeDeg;
        if (percent <= 50) {
            return `linear-gradient(90deg, ${bgColor} 50%, transparent 50%), linear-gradient(${deg}deg, ${color} 50%, ${bgColor} 50%)`;
        }
        return `linear-gradient(-90deg, ${color} 50%, transparent 50%), linear-gradient(${deg}deg, ${color} 50%, ${bgColor} 50%)`;
    }

效果：

image.png