element修改Progress 进度条的背景色以及设置进度条颜色渐变

前言：

最近在做大屏可视化项目、用于展示项目的总体数据。在开发过程中、要求用轮循获取数据源、实时更新数据的进度、前台做出进度展示。

功能实现：

因为项目使用的UI框架是element、所以这里以element为例、实现数据进度的展示。

UI原型图：

1.png

2.png

elemet-ui提供Progress 进度条组件、直接引用即可。但是引入组件的样式是默认的、达不到我们的要求。

3.png

![

4.png

修改Progress进度条背景色

想要直接修改element组件的css样式值 需要加/deep/ 或者 >>> 实现样式穿透

HTML

CSS

修改Progress进度条颜色渐变

element中圆形进度条是由svg绘制渲染出来的、我们只能修改svg标签的色度起始值

HTML

声明svg标签即可、为了方便后续修改element进度条颜色渐变

CSS

效果展示：

7.png

8.png