<p>我發現了可能的程式碼</p>
<pre class="brush:php;toolbar:false;"><svg xmlns="http://www.w3.org/2000/svg"
viewBox="-1 -1 34 34">
<圓cx＝“16” cy＝“16” r＝“15.9155”類別=“進度條__背景” >>
<圓cx＝“16” cy＝“16” r＝“15.9155” class =“progress-bar__progress js-progress-bar”/>
</svg></pre>
<pre class="brush:php;toolbar:false;">$progress-bar-lines-width: 1.8;
$進度條大小：300px；
svg {
高度：$進度條大小；
變換：旋轉（-90度）；
寬度：$進度條大小；
}
.progress-bar__background {
填充：無；
中風：#e2eff0；
筆畫寬度：$progress-bar-筆畫寬度；
}
.progress-bar__progress {
填充：無；
中風：#78bec7；
筆畫破折號數組：100 100；
筆畫-dashoffset：100；
筆劃線帽：圓形；
筆畫寬度：$progress-bar-筆畫寬度；
過渡：行程-dashoffset 1s 緩入緩出；
}</pre>
var 完成百分比 = 0.6;
var strokeDashOffsetValue = 100 - (percentageComplete * 100);
var ProgressBar = $(".js-progress-bar");
ProgressBar.css(“Stroke-dashOffset”,StrokeDashOffsetValue);</pre>
<p> 但我不知道如何處理svg，有人可以幫我嗎，如何將那個藍綠色替換成替換顏色，像圓錐漸變（紅色，黃色，綠色 - 無意的這種透明顏色）？</ p > 
在SVG中，您可以使用
<linearGradient>和<radialGradient>#。您正在創建一個進度條，所以根據佈局，徑向漸進可能是創建“錐形漸進”（加引號！）的選項，但是使用起來真的很煩人。一個很好的替代內建漸變的方法可能是結合SVG和CSS。您可以將CSS樣式套用至嵌入的SVG元素。只要您只需要一個可應用於SVG元素的錐形漸變，然後進行遮罩，以便它只顯示在描邊或其他地方。這是一個範例：
svg { display: block; background-image: conic-gradient(from 180deg, green, orange, red); }<svg width="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <defs> <mask id="m1"> <rect width="100" height="100" fill="white" /> <circle transform="rotate(120 50 50)" cx="50" cy="50" r="45" stroke="black" stroke-width="5" fill="none" stroke-dasharray="300 360" pathLength="360" /> </mask> </defs> <rect width="100" height="100" fill="white" mask="url(#m1)" /> </svg>