<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>64</span>%</div>
</div>
css：
body {font-family: "微软雅黑"
}
.circle {
width: 200px
height: 200px
position: absolute
border-radius: 50%
background: #0cc
}
.pie_left, .pie_right {
width:200px
height:200px
position: absolute
top: 0left: 0
}
.left, .right {
width:200px
height:200px
background:#00aacc
border-radius: 50%
position: absolute
top: 0
left: 0
}
.pie_right, .right {
clip:rect(0,auto,auto,100px)
}
.pie_left, .left {
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: 20px
font-weight: bold
color: #00aacc
}
js：
$(function() {$('.circle').each(function(index, el) {
var num = $(this).find('span').text() * 3.6
if (num<=180) {
$(this).find('.right').css('transform', "rotate(" + num + "deg)")
} else {
$(this).find('.right').css('transform', "rotate(180deg)")
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)")
}
})
})
HTML代码
HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：
<div class="wrapper">
<div class="load-bar">
<div class="load-bar-inner" data-loading="0"><span id="counter"></span></div>
</div>
<h1>Loading</h1>
<p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p>
</div>
CSS样式表
接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：
.load-bar-inner {
height: 99%
width: 0%
border-radius: inherit
position: relative
background: #c2d7ac
background: linear-gradient(#e0f6c8, #98ad84)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3)
animation: loader 10s linear infinite
}
运行效果：
