jQuery进度条插件NUMBERPROGRESSBAR

查看演示立即下载

插件描述：一个可爱的进度条。灵感来自daimajia。

安装

1	`bower install NumberProgressBar [--save]`

用法

HTML

<div class="number-pb">
  <div class="number-pb-shown"></div>
  <div class="number-pb-num">0%</div>
</div>

CSS

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

.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

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

设置

选项默认用法

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

percentage0最初的百分比

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

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery表格插件bs_grid
下一个特效： jQuery烟雾背景发生器（HTML5 Canvas插件waterpipe.js