考虑到进度条的形状(圆角结束/开始)我建议使用SVG。
在下面的示例中,进度使用stroke-dasarray属性进行动画处理,%数字使用jQuery进行递增:
var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
duration: 5000,
easing: 'linear',
step: function () {
count.text(Math.ceil(this.Counter)+ "%");
}
});
body{text-align:center;font-family: 'Open Sans', sans-serif;}
svg{width:30%;}
stroke-dasharray="251.2,0"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
100%
不幸的是IE不支持svg SMIL动画。为了在IE支持下实现相同的结果,可以使用像snap.svg这样的库,并使用JS为stroke-dasharray属性设置动画:
var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
duration: 5000,
easing: 'linear',
step: function () {
count.text(Math.ceil(this.Counter)+ "%");
}
});
var s = Snap('#animated');
var progress = s.select('#progress');
progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);
body{text-align:center;font-family:sans-serif;}
svg{width:30%;}
stroke-dasharray="1,250.2"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80"/>
1%
stroke-dasharray="125.6,125.6"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80"/>
50%
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
100%