使用css3實現環形進度條
阿新 • • 發佈：2018-12-23
進度條效果如下：
整圓的效果處理會簡單些，不完整環實現起來細節多點。下邊是實現邏輯和過程。
進度條組成：
環形：兩種顏色進度條，當餘量少於50%時進度條顏色由綠色變為黃色。進度條結構由兩個疊加環形組成；上疊加環形展示剩餘量，深色；下疊加環形展示100%總量，淺色。
樣式實現：
1：畫一個方形，如圖中陰影部分所示：
2：方形中畫兩個等大均分方形的矩形，(注意每個矩形一定要設定：overflow:hidden)如圖中陰影部分所示：
3：進度條由兩個疊加環形組成，所以第一步的方形中需要畫四個等大的矩形用來展示不同部分的環形。
4：每個矩形中畫一個和父級方形等大的方形，用來展示環形，左半矩形中的環形只設置上邊框和左邊框；右半矩形中的環形只設置上邊框和右邊框，如圖中陰影所示：
5：實現進度條的動態百分比進度，使用css3的transform:rotate將上疊加環形根據實際百分比換算成實際的旋轉角度來實現。
當剩餘量大於50%時左側上疊加環形旋轉角度不用變，只有計算右測上疊加環形旋轉角度即可。
當剩餘量小於百分之50%時，左側上疊加環形旋轉時，就會將左半環形展示為完整的半環，此時就需要一個用來遮擋左側超出進度範圍環形部分的左側環；如下圖所示:
html程式碼如下：
<div class="progress_wrap js_halfClassNameObj">
<div class="right under">
<div css程式碼：
.progress_wrap{
position: relative;
margin:0 0 0 .14rem;
width:.92rem;height:.92rem;
//little和more用來展示黃色和綠色的效果
&.little{
.under{
.rightcircle,.leftcircle{
border-top:$progress_border_under_little;
}
.rightcircle{
border-right:$progress_border_under_little;
}
.leftcircle{
border-left:$progress_border_under_little;
}
}
.up{
.rightcircle,.leftcircle{
border-top:$progress_border_up_little;
}
.rightcircle{
border-right:$progress_border_up_little;
}
.leftcircle{
border-left:$progress_border_up_little;
}
}
//用遮擋實現左側剩餘百分比，遮住超出環形範圍部分；核心是使用同心圓進行邊框進行遮擋
.up_left_cover{
width:.47rem;height:.92rem;
.leftcircle{
top:-.02rem;
width:.74rem;height:.74rem;
border:.11rem solid transparent;
border-top:$progress_border_up_left_cover_little;
border-left:$progress_border_up_left_cover_little;
//實際值為195deg,被遮擋環顏色值深有光暈,需要將角度進行微調（-191deg）進行完全遮擋
-webkit-transform:rotate(-191deg);
}
}
}
&.more{
.under{
.rightcircle,.leftcircle{
border-top:$progress_border_under;
}
.rightcircle{
border-right:$progress_border_under;
}
.leftcircle{
border-left:$progress_border_under;
}
}
.up{
.rightcircle,.leftcircle{
border-top:$progress_border_up;
}
.rightcircle{
border-right:$progress_border_up;
}
.leftcircle{
border-left:$progress_border_up;
}
}
}
.right,.left{
position: absolute;top:0;overflow:hidden;
width:.46rem;height:.92rem;
.circleProgress{
position: absolute; top:0;
width: .78rem; height: .78rem;
border:.07rem solid transparent; border-radius: 50%;
}
.rightcircle{
right:0;
-webkit-transform: rotate(15deg);
}
.leftcircle{
left:0;
-webkit-transform: rotate(-15deg);
}
}
.right{
right:0;
}
.left{
left:0;
}
.num{
position: absolute;left:50%;top:50%;
width:.5rem;
transform:translate(-50%,-50%);
font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem;
}
}js程式碼：
function giftCircleProgressFn(per){
var circleData = {};
var percent = parseInt(per);
//領取進度環形顏色className
var halfClassName = percent<50?"little":"more";
//左半環遮罩層顯示樣式狀態
var leftCircleDisplay = percent<50?"block":"none";
var leftRotate = 0;
var rightRotate = 0;
//以50%為界限;<50%:右半圓佔比為0,左半圓需要使用遮罩進行遮擋,展示剩餘部分
// >50%:左半圓佔比100%,右半圓直接使用百分比計算所佔部分即可
//注意：在半圓中計算百分比時,要將百分比乘以2。
if(percent<50){
leftRotate = -15-180+150*(percent*2)/100;
rightRotate = -135;
}else{
leftRotate = -15;
rightRotate = -135+(150*((percent-50)*2)/100); //比例在半環計算需要*2倍
}
circleData = {
leftRotate:leftRotate, //左半環進度
rightRotate:rightRotate, //右半環進度
halfClassName:halfClassName, //50% 進度環 變色
leftCircleDisplay:leftCircleDisplay, //左半環遮罩
percent:per //進度百分比
}
return circleData
}環形旋轉角度換算需要根據不同需求進行微調即可。
如有什麼好的建議，歡迎多多交流呀。