html一条线 三个圆形做进度条,html – 圆形百分比进度条

考虑到进度条的形状(圆角结束/开始)我建议使用SVG。

cK5lv.jpg

在下面的示例中,进度使用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%

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值