在大圆中画两个半圆遮盖,使用半圆的旋转来实现显示进度条
<div class="circle">
<div class="circle_left">
<div class="cir-left"></div>
</div>
<div class="circle_right">
<div class="cir-right"></div>
</div>
<!-- 内容层 -->
<div class="circle-content">
</div>
</div>
.circle {
font-size: 120px;
width: 1em;
height: 1em;
position: absolute;
border-radius: 50%;
background: #3c3942;
left: 50%;
transform: translateX(-50%);
}
.circle_left,
.circle_right,
.cir-left,
.cir-right {
width: 1em;
height: 1em;
position: absolute;
top: 0;
left: 0;
}
.cir-left,
.cir-right {
border-radius: 50%;
background: #fdbe19;
}
.circle_right,
.cir-right {
clip: rect(0, auto, auto, .5em);
}
.circle_left,
.cir-left {
clip: rect(0, .5em, auto, 0);
}
.circle-time-box {
width: .9em;
height: .9em;
background-color: #1b1a1e;
text-align: center;
}
根据倒计时显示
var time = 30;
var totaltime = 0;
var totaldeg;
var sdeg = (360 / time).toFixed(2);
//显示的倒计时
$("#lastTime").html(time);
var mytimer = setInterval(function () {
time--;
totaltime++;
totaldeg = totaltime * sdeg;
if (totaldeg <= 180) {
$('.cir-right').css('transform', "rotate(" + totaldeg + "deg)");
} else {
$('.cir-right').css('transform', "rotate(180deg)");
$('.cir-left').css('transform', "rotate(" + (totaldeg - 180) + "deg)");
};
$("#lastTime").html(time);
if (time < 1) {
clearInterval(mytimer);
}
}, 1000)