本章节分享一段代码实例，它实现了进度条加载效果。
通过jquery来操控css3样式设置，实现了环形旋转，并且带有百分比。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.gaodaima.com/" />
<title>搞代码</title>
<style>
* {
margin: 0;
padding: 0;
}
.circle {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background: #FFC000;
}
.pie_left, .pie_right {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.left, .right {
display: block;
width: 200px;
height: 200px;
background: #000;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.pie_right, .right {
clip: rect(0 auto auto 100px);
clip: rect(0,auto,auto,100px);
}
.pie_left, .left {
clip: rect(0 100px auto 0);
clip: rect(0,100px,auto,0);
}
.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;
transition: all ease-in;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function() {
var indexCurrent = 0;
setInterval(function(){
if(indexCurrent<100){
indexCurrent++;
}else{
indexCurrent=0;
}
$(".mask").find('span').text(indexCurrent);
$('.circle').each(function(index, el) {
var num = $(this).find('span').text() * 3.6;
if (num<=180) {
$(this).find('.right').css('transform', "rotate(" + num + "deg)");
$(this).find('.left').css('transform', "rotate(" + 0 + "deg)");
} else {
$(this).find('.right').css('transform', "rotate(180deg)");
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
};
});
},50);
});
</script>
</head>
<body>
<div class="a"><div class="b"></div></div>
<div class="circle">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>1</span>%</div>
</div>
</body>
</html>
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery实现环形旋转加载进度条效果代码实例
转载请注明原文链接：jQuery实现环形旋转加载进度条效果代码实例
