环形进度条效果怎么实现？用css3实现环形进度条效果代码示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了环形进度条效果怎么实现？用css3实现环形进度条效果代码示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4750字，纯文字阅读大概需要7分钟。
内容图文
上一篇文章我们介绍了如何使用css3实现条形进度条效果（附完整代码），了解到进度条的实用性，那么今天来向大家介绍一下另外一种形式的进度条：环形进度条。这种进度条适合应用于页面加载的时候和环形计时器的页面。本篇文章给大家带来的内容是关于如何使用css3实现环形进度条效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
如何使用css3实现条环进度条效果原理
首先我们需要画出圆形进度条，但是div格式都是方形的，这就需要用到border-radius将方形转换成圆形。
圆形的进度条一直处于旋转的状态，我们可以引用css3里面的rotage（deg）语句实现这一效果。
3.这里我们详细梳理一下rotage（deg）的用法
a.旋转：1.rotateX(deg) //绕x轴旋转
2.rotateY(deg) //绕Y轴旋转
3. rotateZ(deg) //绕Z轴旋转
b.平移：translate(a,b) //在x，y方向平移a,b像素距离。利用translate(-50%,50%)可以实现居中。
translateX(a) //在X方向平移a的像素距离。
translateY(a)//在Y方向平移a的像素距离。
translateZ(a)//在Z方向平移a的像素距离。
如何使用css3实现条环进度条效果步骤（代码）
步骤一：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,被遮挡环颜色值深有光晕,需要将角度进行微调（-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
}实现效果如图所示
以上就是环形进度条效果怎么实现？用css3实现环形进度条效果代码示例的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的环形进度条效果怎么实现？用css3实现环形进度条效果代码示例全部内容，希望文章能够帮你解决环形进度条效果怎么实现？用css3实现环形进度条效果代码示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。