elementUI progress bar progressbar gradient color

It is relatively easy to implement a relatively single gradient color. You only need to add a css style, but remember that the style must not be scoped, otherwise it will not take effect.

.el-progress-bar__inner {
  background-color: unset;
  background-image: linear-gradient(to right, #6dd6f8, #6d9df8);
}

Other codes remain unchanged

<el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="80"
                  ></el-progress>

Effect:

Then if the demand is upgraded, the color of the progress bar will change as the percentage continues to increase. At this time, you can divide it into several levels according to the percentage, and set different classes corresponding to different colors for each level. For example:

<el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="xtcc.usage"
                  :class="{
                    per60: xtcc.usage <= 60,
                    per80: xtcc.usage > 60 && xtcc.usage <= 80,
                    per100: xtcc.usage > 80,
                  }"
                ></el-progress>

.per60 .el-progress-bar__inner {
  background-color: unset;
  background-image: linear-gradient(to right, #6dd6f8, #6d9df8);
}
.per80 .el-progress-bar__inner {
  background-color: unset;
  background-image: linear-gradient(to right, #6dd6f8, #f86df8);
}
.per100 .el-progress-bar__inner {
  background-color: unset;
  background-image: linear-gradient(to right, #6dd6f8, #f86d6d);
}

Effect: