<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css环形进度条</title>
<style>
body {
padding: 0px;
margin: 0px;
position: relative;
height: 100%;
text-align: center;
}
.tab_highlight, .gift_oper .get_btn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.h2 {
margin: 0.3rem 0 0.2rem;
font-size: 0.26rem;
color: #128477;
text-align: left;
}
/*对应的sass代码---------------------------开始*/
/*.gift_oper{
float:left;
margin:0 0 0 .86rem;
.progress_wrap{
position: relative;
margin:0 0 0 .14rem;
width:.92rem;height:.92rem;
&.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）进行完全遮挡
transform:rotate(-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;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
.leftcircle{
left:0;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}
}
.right{
right:0;
}
.left{
left:0;
}
.num{
position: absolute;left:50%;top:50%;
width:.5rem;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem;
}
}
.get_btn{
@extend .tab_highlight;
display:block;
margin:.01rem 0 0;
width:1.2rem;height:.36rem;line-height:.36rem;
background:$style_btn_bg;
border-radius:.18rem;
text-align:center;font-size:.22rem;font-weight:700;color:#fff;letter-spacing:.02rem;cursor:pointer;
&.no{
background:$public_inputBtn_bg;
}
}
}*/
/*对应的sass代码----------------------------------------结束*/
.gift_oper {
float: left;
margin: 0 0 0 0.86rem;
}
.gift_oper .progress_wrap {
position: relative;
margin: 0 0 0 0.14rem;
width: 0.92rem;
height: 0.92rem;
}
.gift_oper .progress_wrap.little .under .rightcircle, .gift_oper .progress_wrap.little .under .leftcircle {
border-top: 0.07rem solid #fce4bd;
}
.gift_oper .progress_wrap.little .under .rightcircle
css3+JavaScript实现环形进度条
5星 · 超过95%的资源 需积分: 50 61 浏览量
2018-12-06
11:23:31
上传
评论 8
收藏 3KB ZIP 举报 
circle.zip （1个子文件） 
circle 
index.html 18KB资源评论
李诗旸2023-07-25使用该文件，你可以轻松地在你的项目中添加一个漂亮的进度条，提升用户体验。
BellWang2023-07-25这个环形进度条的效果酷炫但不夸张，非常适合在网页中展示进度信息。
萌新小白爱学习2023-07-25这个文件展示了如何使用CSS3和JavaScript创建一个简单但好看的环形进度条，非常实用。
武藏美-伊雯2023-07-25文件提供了清晰的代码和注释，使得即使是初学者也能够轻松理解并应用。
李多田2023-07-25这是一个简洁而实用的文件，对于需要展示进度的场景非常适合使用。
