进度条实际效果以下：
整圆的实际效果解决会简易些，不详细环完成起来细节多一点。下边是完成逻辑性和全过程。
进度条构成：
环状：两种色调进度条，当余量少于50%时进度条色调由翠绿色变成黄色。进度条构造由两个叠加环状构成；上叠加环状展现剩下量，深色；下叠加环状展现100%总量，浅色系。
款式完成：
1：画1个方形，如图中黑影一部分所示：
2：方形中画两个等大平均分方形的矩形框，(留意每一个矩形框1定要设定：overflow:hidden)如图中黑影一部分所示：
3：进度条由两个叠加环状构成，因此第1步的方形中必须画4个等大的矩形框用来展现不一样一部分的环状。
4：每一个矩形框中画1个和父级方形等大的方形，用来展现环状，左半矩形框中的环状只设定上边框和左侧框；右半矩形框中的环状只设定上边框和右侧框，如图中黑影所示：
5：完成进度条的动态性百分比进度，应用css3的transform:rotate将上叠加环状依据具体百分比换算成具体的转动角度来完成。
当剩下量超过50%时左边上叠加环状转动角度无需变，仅有测算右测上叠加环状转动角度便可。
当剩下量小于百分之50%时，左边上叠加环状转动时，就会将左半环状展现为详细的半环，此时就必须1个用来遮挡左边超过进度范畴环状一部分的左边环；以下图所示:
html编码以下：
<div class="progress_wrap js_halfClassNameObj">
<div class="right under">
<div class="circleProgress rightcircle"></div>
</div>
<div class="left under">
<div class="circleProgress leftcircle"></div>
</div>
<div class="right up">
<div class="circleProgress rightcircle js_progressRight" style="-webkit-transform:rotate('+circleData.rightRotate.toString()+'deg)"></div>
</div>
<div class="left up">
<div class="circleProgress leftcircle js_progressLeft" style="-webkit-transform:rotate('+circleData.leftRotate.toString()+'deg)"></div>
</div>
//percent小于50时必须应用遮罩开展遮挡超过环状范畴一部分
<div class="left up_left_cover js_giftLeftCover" style="display:'+circleData.leftCircleDisplay+'">
<div class="circleProgress leftcircle color_border_t_l04"></div>
</div>
<div class="num">
<div>剩下</div>
<div class="js_giftPercent">'+circleData.percent+'%</div>
</div>
</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,被遮挡环色调值深有光晕,必须将角度开展微调（⑴91deg）开展彻底遮挡
-webkit-transform:rotate(⑴91deg);
}
}
}
&.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(⑴5deg);
}
}
.right{
right:0;
}
.left{
left:0;
}
.num{
position: absolute;left:50%;top:50%;
width:.5rem;
transform:translate(⑸0%,⑸0%);
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 = ⑴5⑴80+150*(percent*2)/100;
rightRotate = ⑴35;
}else{
leftRotate = ⑴5;
rightRotate = ⑴35+(150*((percent⑸0)*2)/100); //占比在半环测算必须*2倍
}
circleData = {
leftRotate:leftRotate, //左半环进度
rightRotate:rightRotate, //右半环进度
halfClassName:halfClassName, //50% 进度环 变色
leftCircleDisplay:leftCircleDisplay, //左半环遮罩
percent:per //进度百分比
}
return circleData
}
环状转动角度换算必须依据不一样要求开展微调便可。
总结
以上所述是网编给大伙儿详细介绍的应用CSS3完成环状进度条实际效果，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
Copyright © 2002-2020 如何创建网站_免费网站建站_网站建设文章_网站建设7个基本流程_自动建站 版权所有 （网站地图） 粤ICP备10235580号