能用現(xiàn)成組件就用，實現(xiàn)不行再自己寫，因為牽扯到上傳文件，進度實時出不來，所以只能使用dom元素操作；

1.實現(xiàn)

效果：

上圖是100%，如果需要根據(jù)百分比顯示，我們需要看下代碼里面left和right的旋轉角度，這個圓實現(xiàn)上，以垂直直徑切割，是左右兩部分，調(diào)整css transform即可。

代碼如下：

html

percentHtml.innerHTML = `<div class="progress"><span class="title"></span><div class="overlay"></div><div class="left" style="transform: rotate(${get_deg(percenNum)?.left_deg}deg);z-index: ${get_deg(percenNum)?.zIndex_left};"></div><div class="right" style="transform: rotate(${get_deg(percenNum)?.right_deg}deg);"></div></div>`

css

* {box-sizing: border-box;padding: 0;margin: 0;}.progress {width: 20px;height: 20px;color: #fff;border-radius: 50%;overflow: hidden;position: relative;background: #dcdcdc;text-align: center;line-height: 200px;box-shadow: 2px 2px 2px 2px white;mask: radial-gradient(transparent 7px, #000 8px);-webkit-mask: radial-gradient(transparent 7px, #000 8px)}.progress .overlay {width: 50%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;background-color: #dcdcdc;}.progress .left,.progress .right {width: 50%;height: 100%;position: absolute;top: 0;left: 0;border: 10px solid #29b6f6;border-radius: 100px 0px 0px 100px;border-right: 0;transform-origin: right;}

?2.原理及函數(shù)

可以用這個原理實現(xiàn)百分比：

1）0%，left為0deg（z-index為0，因為right在左邊，所以需要index為0至在灰色下面），right為0deg；

2）當百分比小于50%且不為0的時候，左邊不需要百分比：繼續(xù)為0度，右邊180度是50%，計算出1%是多少度：180 / 50% = 3.6度（度/1%），乘以百分比即可；

3）大于50%，right為180deg，left對應：100%是0deg，z-Index?= 10，75%對應-90deg，以此為例，那么計算規(guī)律是，75% - 50% = 25%，25 * 3.6 = 90，因為left是逆時針計算，所以需要用180 - 90 = 90，再添加一個符號即可（數(shù)學上直接減180結果一樣），就是-90deg。

4）100%，left為0deg（z-index=10，覆蓋左側overlay），right為180deg；

如下函數(shù)：

const get_deg = (percent: number) => {let left_deg=0, right_deg=0, zIndex_left = 0;const one_percent_deg = 180 / 50; // （3.6度/1%）if (percent) {if (percent <=50 && percent > 0) {console.log('小于50大于0');left_deg = 0;right_deg = percent * one_percent_deg;} else if (percent > 50 && percent < 100) {console.log('50到100');left_deg = (percent - 50) * one_percent_deg - 180;zIndex_left = 10;right_deg = 180;} else if (percent === 100) {console.log('等于100');left_deg = 0;zIndex_left = 10;right_deg = 180;}}return {left_deg,right_deg,zIndex_left} 
}

特別注意一點，在 左側半圓環(huán)，大于50%的時候，需要給左側添加z-index=100，因為：其實他們左右的顏色大小都是不變的，只是在旋轉，給我們視覺上的效果，就像是百分比一樣。

我們給左側限制了-180度的最小值，就是不讓他旋轉到右側，而右側0度的最小限制也是一個意思。

在大于50%的時候右側為180度，我們看如果75%的時候，也是就左側25%，且設置右側小于180度會發(fā)生什么：

這里設置的左側旋轉-90度，右側為80度，我們清晰的看到左側的環(huán)形會來到右側，中間會有縫隙，當然我們大于50%的時候，右側會占滿，同時使用z-index靈活去遮擋，就給我們視覺上看到正確的百分比，這里需要理解并實踐。

注：代碼參考自網(wǎng)絡，有改變，僅做記錄、參考使用