CSS3圆形进度条逻辑（两个半圆）问题描述
最近再写⼤屏的项⽬，很多关于圆形进度条的效果，出了⼀种思路，在这⾥做个记录，⽅便⾃⼰学习逻辑思想
上图代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Document</title>
</head>
<style>
/* 长⽅形 */
.rectangle{
height: 100px;
width: 200px;
border: 1px solid rebeccapurple;
}
.radius50p{
border-radius: 50%;
}
/* 正⽅形 */
.square{
width: 200px;
height: 200px;
border: 1px solid rebeccapurple;
}
/* 长⽅形的⼀半 */
.half-rectangle-right{
clip:rect(0,202px,202px,102px);
/* ⼀定要有，否则clip不起作⽤ */
position: absolute;
border-color: red;
}
}
/* 长⽅形的⼀半 */
.half-rectangle-left{
clip:rect(0,102px,202px,0px);
/* ⼀定要有，否则clip不起作⽤ */
position: absolute;
border-color: blue;
}
.relative{
position: relative;
width: 250px;
height: 250px;
}
</style>
<body>
<div class="rectangle radius50p"></div>
<div class="square radius50p"></div>
<!-- <div class="square half-rectangle"></div> -->
<div class="relative">
<div class="square half-rectangle"></div>
</div>
<div class="relative">
<div class="square half-rectangle-right radius50p"></div>
</div>
<div class="relative">
<div class="square half-rectangle-left radius50p"></div>
</div>
<div class="relative">
<div class="square half-rectangle-left radius50p"></div>
<div class="square half-rectangle-right radius50p"></div>
</div>
<div class="relative">
<div>右半圆开始旋转，⽩⾊部分，就认为是进图条</div>
<div class="square half-rectangle-left radius50p"></div>
<div class="square half-rectangle-right radius50p" ></div> </div>
<div class="relative">
<div>右半圆开始旋转，⽩⾊部分，就认为是进图条</div>
<div class="square half-rectangle-left radius50p"></div>
<div class="square half-rectangle-right radius50p" ></div> </div>
<div class="relative">
<div>两个右边半圆，第⼀个右半圆全部显⽰，第⼆个右半圆旋转</div>
<div class="square half-rectangle-right radius50p"></div>
<div class="square half-rectangle-right radius50p" ></div> </div>
</body>
</html>
动态旋转效果
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap,.circle,.percent{
position: absolute;
width: 200px;
height: 200px;
height: 200px;
border-radius: 50%;
}
.wrap{
top:50px;
left:50px;
background-color: #ccc;
}
.circle{
box-sizing: border-box;
border:20px solid #ccc;
clip:rect(0,200px,200px,100px);
}
.clip-auto{
clip:rect(auto, auto, auto, auto);
}
.percent{
box-sizing: border-box;
top:-20px;
left:-20px;
}
.left{
transition:transform ease;
border:20px solid blue;
clip:rect(0,100px,200px,0);
}
/* 占⽤⼀个div 正⽅形的⼀半，然后设置为圆⾓，恰好是⼀个半圆 */
.right{
border:20px solid blue;
clip:rect(0,200px,200px,100px);
}
absolute relative
.
wth0{
width:0;
}
.num{
position: absolute;
box-sizing: border-box;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 40px;
left: 20px;
top: 20px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
</style>
<script src="apps.bdimg/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="circle">
<!-- 左边的半圆 -->
<div class="percent left"></div>
<!-- 右边的半圆 -->
<div class="percent right wth0"></div>
</div>
<!-- 中间的内容 -->
<div class="num"><span>0</span>%</div>
</div>
</body>
<script>
/
/ 占⽐ 60%
var percent =60;
var count =0
var loading =setInterval(function(){
// 超过指定的进度条就不再旋转了
if(count >= percent){
clearInterval(loading)
}
// 如果超过⼀百，则重新归零，继续旋转
if(count>100){
count=0;
$('.circle').removeClass('clip-auto');
$('.right').addClass('wth0');
}else if(count >50){// 如果进度超过百分之50，则右侧的全部显⽰出来，不需要再旋转
}else if(count >50){// 如果进度超过百分之50，则右侧的全部显⽰出来，不需要再旋转$('.circle').addClass('clip-auto');
$('.right').removeClass('wth0');
}
// ⼩于50%，显⽰的是左侧的的div，当超过50%，则左侧的部分被隐藏，右侧的全部显⽰$('.left').css("-webkit-transform","rotate("+(18/5)*count+"deg)");
$('.num>span').text(count);
count++;
},200);
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。