颜色和进度状态的颜色更改"/>
element圆形进度条的背景颜色和进度状态的颜色更改
vue页面
<div style="position: relative">
<el-progress
class="progress-two circle2"
type="circle"
:percentage="20"
:show-text="false"
:width="120"
:stroke-width="9"
color="#436DF5"
></el-progress>
<!-- 进度条设置渐变色 -->
<svg style="position: absolute; z-index: -1" width="100%" height="100%">
<defs>
<linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">
<stop
offset="0%"
style="stop-color: #3fcfa8"
stop-opacity="1"
></stop>
<stop
offset="100%"
style="stop-color: #5ffdda"
stop-opacity="1"
></stop>
</linearGradient>
</defs>
</svg>
</div>
css样式
<style lang="scss" scoped>
// 设置进度条的背景颜色
::v-deep .el-progress-circle__track {
stroke: rgb(95, 183, 253, 0.8);
}
</style>
<style>
.circle2 svg > path:nth-child(2) {
stroke: url(#write);
}
</style>
更多推荐
element圆形进度条的背景颜色和进度状态的颜色更改
发布评论