<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
}
运行效果：
1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。 2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill 和.bar-fill的span标签。 Plain 3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。 .container { width:30%margin:0 auto } .title { background:#545965color:#fffpadding:15pxfloat:leftposition:relative-webkit-border-top-left-radius:5px-webkit-border-bottom-left-radius:5px-moz-border-radius-topleft:5px-moz-border-radius-bottomleft:5pxborder-top-left-radius:5pxborder-bottom-left-radius:5px } 4.首先建一个白色的背景 .bar-unfill {height:15pxdisplay:blockbackground:#fffwidth:100%border-radius:8px} 5.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。 .bar-fill { height:15pxdisplay:blockbackground:#45c9a5width:0border-radius:8px-webkit-transition:width .8s ease-moz-transition:width .8s easetransition:width .8s ease-webkit-animation:progressbar 7s infiniteanimation:progressbar 7s infinite } 6.使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。 @-webkit-keyframes progressbar { from { width:0 } to { width:100% } } /* Standard syntax */ @keyframes progressbar { from { width:0 } to { width:100% } } 7.条纹进度条，应该把 .bar-fill 重新命名为 .bar-fill-stripes 。使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码： .bar-fill-stripes { height:15pxdisplay:blockbackground:#e74c3cwidth:0border-radius:8pxbackground-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)-webkit-transition:width .8s ease-moz-transition:width .8s easetransition:width .8s ease-webkit-animation:progressbar 7s infiniteanimation:progressbar 7s infinite } 追踪 Tracker 8.最后产生动画效果 .track-wrap { position:relativetop:-18px-webkit-animation:progressbar2 7s infiniteanimation:progressbar2 7s infinite } .track { height:20pxdisplay:blockbackground:#e74c3cwidth:20pxborder-radius:10pxposition:relativeleft:-12px } @-webkit-keyframes progressbar2 { from { left:0 } to { left:100% } } /* Standard syntax */ @keyframes progressbar2 { from { left:0 } to { left:100% }
