element修改Progress 进度条的颜色

修改Progress 进度条的背景色

 <el-progress :width="60" :hidden="60" type="circle" :percentage="50" color="#333333"></el-progress>

:deep() .el-progress path:first-child {
    // 修改进度条背景色
    stroke: #14da25;
}
:deep() .el-progress__text {
    // 修改进度条文字提示颜色
    color: #e6451c;
}

修改Progress进度条颜色渐变

实现思路: element中圆形进度条是由svg绘制渲染出来的,只能修改svg标签的色度起始值 需声明svg标签，方便修改element进度条颜色渐变

// 定义修改svg
<div style="width: 0px; height: 0px">
     <svg width="100%" height="100%">
           <defs>
                <linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">
                    // offset 设置起始 stop-color 设置起始位置的颜色
                    <stop offset="0%" style="stop-color: #0299e2" stop-opacity="0.8"></stop>
                    // offset 设置起始 stop-color 设置起始位置的颜色
                    <stop offset="100%" style="stop-color: #02e4dc" stop-opacity="1"></stop>      
                 </linearGradient>
            </defs>
      </svg>
</div>

// Progress进度条
<el-progress :width="60" :hidden="60" type="circle" :percentage="50"></el-progress>

// 修改Progress进度条颜色渐变
:deep() svg > path:nth-child(2) {
    stroke: url(#write); // #write 此处的id就是定义的svg标签id, 做替换即可
}