阿里云优惠活动，点击链接进行购买: 一年仅需96.9元即可以购买服务器~
腾讯云优惠活动, 点击链接进行购买一年仅需99元
腾讯云限时开团活动, 点击链接进行购买一年仅需95元
# css3实现圆环加载进度条动画
最近有人问我关于css3圆环的问题，要实现一个圆环，并且有加载特效。于是我看了看一般关于圆环实现的原理，以及自己手写了一个加载动画。可能体验还不是特别好，但是能用。话不多说，一下是代码：
####html结构：
<div class="circle">
<div class="left">
<div class="left_con"></div>
</div>
<div class="right">
<div class="right_con"></div>
</div>
<div class="mask">
<span>60</span>%
</div>
</div>
####css：
.circle{
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
background: rgba(0,120,200,0.2);
}
.circle .left,.circle .right{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.left{
clip: rect(0,100px,auto,0);
}
.right{
clip: rect(0,auto,auto,100px);
}
.left_con,.right_con{
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgb(0,120,200);
position: absolute;
top: 0;
left: 0;
}
.left_con{
clip: rect(0,100px,auto,0);
}
.right_con{
clip: rect(0,auto,auto,100px);
}
.mask {
width: 150px;
height: 150px;
border-radius: 50%;
left: 25px;
top: 25px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 150px;
font-size: 16px;
}
为操作方便引入了jq
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
####js代码：
var annulus = function(speed){
var _this = this;
_this.speed = speed||10;
function init(){
circle();
}
function circle(){
$('.circle').each(function(index, el) {
var numStart = 0;
var num = $(this).find('span').text() * 3.6;
var timer = null;
var that = this;
timer = setInterval(function(){
if(numStart>num){
clearInterval(timer);
tiemr = null;
}
animateLoading(that,numStart);
numStart += 3.6;
},_this.speed);
});
}
function animateLoading(_this,num){
if (num <= 180) {
$(_this).find('.right_con').css({'transform':"rotate(" + num + "deg)"});
} else {
$(_this).find('.right_con').css({'transform': "rotate(180deg)"});
$(_this).find('.left_con').css({'transform': "rotate(" + (num - 180) + "deg)"});
};
};
return {
init:init
}
}
var a = new annulus(10);
a.init();