能用現(xiàn)成組件就用，實(shí)現(xiàn)不行再自己寫(xiě)，因?yàn)闋砍兜缴蟼魑募?#xff0c;進(jìn)度實(shí)時(shí)出不來(lái)，所以只能使用dom元素操作；

1.實(shí)現(xiàn)

效果：

上圖是100%，如果需要根據(jù)百分比顯示，我們需要看下代碼里面left和right的旋轉(zhuǎn)角度，這個(gè)圓實(shí)現(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ù)

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

1）0%，left為0deg（z-index為0，因?yàn)閞ight在左邊，所以需要index為0至在灰色下面），right為0deg；

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

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

4）100%，left為0deg（z-index=10，覆蓋左側(cè)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} 
}

特別注意一點(diǎn)，在 左側(cè)半圓環(huán)，大于50%的時(shí)候，需要給左側(cè)添加z-index=100，因?yàn)?#xff1a;其實(shí)他們左右的顏色大小都是不變的，只是在旋轉(zhuǎn)，給我們視覺(jué)上的效果，就像是百分比一樣。

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

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

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

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