element Progress 环形进度条渐变样式修改

最新推荐文章于 2024-03-18 15:41:29 发布

哆比哆比

最新推荐文章于 2024-03-18 15:41:29 发布

阅读量1.2k

点赞数 1

分类专栏： element 文章标签： css html html5

本文链接：https://blog.csdn.net/WMW_wmw/article/details/120698358

版权

element 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最终效果图
在这里插入图片描述

 <el-progress
   class="circle0"
   :width="140"
   type="circle"
   :stroke-width="20"
   percentage="测试"
 ></el-progress>
    <svg width="100%" height="0">
        <defs>
          <linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color: #86e79f" stop-opacity="0.8"></stop>
            <stop offset="100%" style="stop-color: #fbdd97" stop-opacity="1"></stop>
          </linearGradient>
        </defs>
      </svg>

 .circle0 /deep/ {
          .el-progress__text {
            background-image: -webkit-linear-gradient(bottom, #d3fbfb, #fbdd97);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
          }
          svg > path:nth-child(2) {
            stroke: url(#write);
          }
          .el-progress-circle__track {
            stroke: rgba(251, 221, 151, 0.2);
          }
        }