elementUI环形进度条设置渐变色和修改底色

1、elementUI环形进度条设置渐变色

第一步:正常引入elementUi环形进度条

<el-progress class="progress-two circle2"  type="circle" color="#02A0DF" :stroke-width="20" :show-text="false" :width="200" :percentage="femaleElder"></el-progress>

第二步:在页面的其他不占位地方写如下svg代码,并在linearGradient 标签上写上id,内部的stop标签的stop-color为颜色,支持rgb、rgba和十六进制颜色,stop-opacity表示透明度

	 <svg width="100%" height="100%">
        <defs>
          <linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#0299E2" stop-opacity="0.8"></stop>
            <stop offset="100%" style="stop-color:#02E4DC" stop-opacity="1"></stop>
          </linearGradient>
        </defs>
      </svg>

第三步:在css中修改原本进度条的svg

	.circle2 /deep/ svg>path:nth-child(2) {
    
    
        stroke: url(#write);
      }

2、elementUi修改环形进度条底色

	.el-progress-circle__track {
    
    
        stroke: #120D65;
      }

猜你喜欢

转载自blog.csdn.net/qq_26679989/article/details/108408212