jQuery 的进度条插件 Bootstrap Progressbar

Bootstrap Progressbar 是一个 jQuery 插件，扩展了基本引导进度。它通过添加 Javascript 中预先存在的 CSS 转换提供了动态进度条。此外，你可以在动态进度条中通过回调显示当前进度信息。

github地址：      https://github.com/minddust/bootstrap-progressbar     

1. 引入js   bootstrap-progressbar.js

   <script type="text/javascript" src="bootstrap-progressbar.js"></script>

2. 页面加入js启动    bootstrap-progressbar

   $('.progress .bar').progressbar();           // bootstrap 2
   $('.progress .progress-bar').progressbar();  // bootstrap 3

3. HTML格式。

   1. data-transitiongoal

      <div class="progress">
          <div class="progress-bar" data-transitiongoal="75"></div>
      </div>

   2. aria-valuemin (default: 0) and aria-valuemax (default: 100)

      <div class="progress">
          <div class="progress-bar" data-transitiongoal="75" aria-valuemin="-1337" aria-valuemax="9000"></div>
      </div>

4. 默认设置    

   动态进度条默认设置
   Progressbar.defaults = {
       transition_delay: 300,   （推迟开始动画加载时间）
       refresh_speed: 50,       （数字多少毫秒刷新一次）
       display_text: 'none',    （进度条显示数字  none/fill/center）
       use_percentage: true,    （ true显示百分  false 显示 /100）
       percent_format: function(percent) { return percent + '%'; },  （如果use_percentage 返回true 设置的文本格式）
       amount_format: function(amount_part, amount_total) { return amount_part + ' / ' + amount_total; },（如果use_percentage 返回false 设置的文本格式）
       update: $.noop, （回调函数：进度条过渡时的更新，时间取决于resresh_speed）
       done: $.noop,  （回调函数：进度条过度过程完成后）
       fail: $.noop  （回调函数：进度条过度过程失败）
   };

   transition_delay：

   $(document).ready(function() {
       $('.progress .progress-bar').progressbar({
           transition_delay: 1500
       });
   });

         

转载于:https://my.oschina.net/evashuang/blog/793015