登录注册

jQuery进度条插件NUMBERPROGRESSBAR

插件特效
2026-07-25 23:36 3 次浏览 • 0 次下载 41.6KB
jQuery进度条插件NUMBERPROGRESSBAR

安装

1
bower install NumberProgressBar [--save]

用法

HTML

1
2
3
4
<div class="number-pb">
<div class="number-pb-shown"></div>
<div class="number-pb-num">0%</div>
</div>


CSS

您可以参考该文件number-pb.css，使用自己的修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.number-pb {
position: relative;
height: 3px;
background-color: #ddd;
}
.number-pb .number-pb-shown {
position: absolute;
background-color: #176785;
background-image: linear-gradient(to right, #176785, #499989);
top: -1px;
left: 0;
height: 5px;
-moz-box-shadow: 0 0 3px 0 #499989;
-webkit-box-shadow: 0 0 3px 0 #499989;
box-shadow: 0 0 3px 0 #499989;
}
.number-pb .number-pb-num {
position: absolute;
background-color: #fff;
left: 0;
top: -0.45em;
padding: 0 5px;
}


javaScript

1
2
var bars = $('.number-pb').NumberProgressBar(options);
bars.reach(num); //num是在你想要达到的百分比


设置


选项默认用法

duration10000的持续时间（毫秒）所需的从0到100

percentage0最初的百分比

shownQuery'.number-pb-shown'在显示栏的查询字符串

numQuery'.number-pb-num'该号码的查询字符串


评论