<style>
* {
margin: 0;
padding: 0;
}
.wrap,
.circle,
.percent {
position: absolute;
width: 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 #bc5574;
clip: rect(0, 100px, 200px, 0);
}
.right {
border: 20px solid #bc5574;
clip: rect(0, 200px, 200px, 100px);
}
.nothing {
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>
<body>
<div class="wrap">
<div class="circle">
<div class="percent left"></div>
<div class="percent right nothing"></div>
</div>
<div class="num"><span class="export">0</span>%</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
var percent = 0;//初始化百分比
var rcent = 100;//需要显示的百分比
var loading = setInterval(function() {
if(percent > 100) {
percent = 0;
$('.circle').removeClass('clip-auto');
$('.right').addClass('nothing');
} else if(percent > 50) {
$('.circle').addClass('clip-auto');
$('.right').removeClass('nothing');
}
$('.left').css("-webkit-transform", "rotate(" + (18 / 5) * percent + "deg)");
$('.export').text(percent);
if(percent == rcent){
//加载完成
clearInterval(loading);
}else{
percent++;
}
}, 50);
</script>
扫一扫
9657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
