el-progress进度条颜色渐变

关注

原创最新推荐文章于 2026-07-06 14:23:36 发布 905 阅读 AI 写同款· GEO 优化 ›

＜ ElementUi组件库： el-progress 进度条Bug及样式调整＞在 Vue + elementUi 开发中，在使用Progress进度条时，往往会因为需求原型太过花里胡哨而烦恼（原本的样式并不能满足需求）。为什么呢？因为这个组件elementUi并没有提供过多的自定义属性及插槽，对的，插槽也没有，不能自定义进度条文本样式。即使在elementUi的文档里面写了属性，但是实际使用并未生效（怀疑是bug）。Tips: 基于 elementUi来说，好像elementUi - Plus升级了，修复了bug，也增加了对应的属性、开放了插槽！阅读详情

效果图：

代码：

<el-progress
              stroke-width="4"
              type="line"
              :percentage="91.23"
              class="custom-progress"
              color="transparent"
            >
              <template #default="{ percentage }">
                <div class="progress-label">{{ percentage }}%</div>
              </template>
            </el-progress>

样式代码：

.custom-progress {
  position: relative;
  width: 300px; /* 设置进度条的宽度 */
  background: transparent;
}
// 进度条颜色渐变
:deep(.custom-progress .el-progress-bar__inner) {
  background-image: linear-gradient(
    to right,
    rgba(0, 120, 255, 0.1),
    rgba(0, 160, 255, 1)
  );
}