elementui进度条如何设置_给element进度条设置渐变色

今天遇到一个element进度条样式问题：将进度条的颜色设置为渐变色。

效果图如下：

进度条颜色效果图

查看element官方文档得知，ele官方提供的color方法支持单色显示

element官方文档

element官方文档

考虑到CSS中 background-image属性可以提供颜色渐变，在网页F12中直接调试后发现该方法可行：

linear-gradient

1.基本用法：background-image:linear-gradient(red, yellow, blue, green);

background-image:linear-gradient(rgba(255,0,0,.2), yellow, blue, green);

2.控制颜色渐变的方向：/*0deg= to top-- 从下到上*/

background-image: linear-gradient(0deg, red, yellow, blue, green);

/*基于0度顺时针旋转45deg*/

background-image: linear-gradient(45deg, red, yellow, blue, green);

/*基于0度逆时针旋转45deg*/

background-image: linear-gradient(-45deg, red, yellow, blue, green);

3.控制颜色渐变的方向(to)：/*从