vue页面

<div style="position: relative">

        <el-progress

          class="progress-two circle2"

          type="circle"

          :percentage="20"

          :show-text="false"

          :width="120"

          :stroke-width="9"

          color="#436DF5"

        ></el-progress>

       

        <!-- 进度条设置渐变色 -->

        <svg style="position: absolute; z-index: -1" width="100%" height="100%">

          <defs>

            <linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">

              <stop

                offset="0%"

                style="stop-color: #3fcfa8"

                stop-opacity="1"

              ></stop>

              <stop

                offset="100%"

                style="stop-color: #5ffdda"

                stop-opacity="1"

              ></stop>

            </linearGradient>

          </defs>

        </svg>

      </div>

 css样式

 <style lang="scss" scoped>

// 设置进度条的背景颜色

::v-deep .el-progress-circle__track {

  stroke: rgb(95, 183, 253, 0.8);

}

</style>

<style>

.circle2 svg > path:nth-child(2) {

  stroke: url(#write);

}

</style>