Linear gradient problem of el-progress progress bar

Change the gradient of the linear progress bar

code show as below

 <div class="progress-style">
     <el-progress :percentage="percentageSd"
     :width="180"
     :stroke-width="10"
     :color="'#5A7FCA'"></el-progress>
     <div class="flow-display">
         <span class="span-style-one">{{keySelfInfo.diskSpace.sdOccupy}}</span> / 
         <span class="span-style-two">{{keySelfInfo.diskSpace.sdGross}}</span>
     </div>
  </div>
<style>
.progress-style .el-progress-bar__inner {
	background-image: linear-gradient(to right, #5980ca, #41b0c5);
}
</style>

Change the arc, the progress bar gradual problem

<div class="cpu-load-two">
    <div class="cpu-load-title">CPU Temp</div>
        <div class="progress-margin">
            <el-progress class="progress-two circle2"
            type="dashboard"
            :format="format"
            :stroke-width="8"
            :width="180"
            :percentage="keySelfInfo.cpuTemperature"></el-progress>
            <svg width="100%"height="100%">
                <defs>
                    <linearGradient id="colors"
                    x1="0%"
                    y1="0%"
                    x2="100%"
                    y2="0%">
                        <stop offset="0%" style="stop-color:#F4B957" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#F46B45" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
            <div class="outer-box">
            <div class="inner-box"></div>
        </div>
    </div>
</div>
 <style lang="scss" scoped>
.circle2 /deep/ svg > path:nth-child(2) {
    stroke: url(#colors);
}
<style>