软件简介

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

代码示例 ：

default values

Progressbar.defaults = {
    transition_delay: 300,
    refresh_speed: 50,
    display_text: 'none',
    use_percentage: true,    percent_format: function(percent) { return percent + '%'; },    amount_format: function(amount_part, amount_total) { return amount_part + ' / ' + amount_total; },
    update: $.noop,
    done: $.noop,
    fail: $.noop
};

transition_delay

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

animation

1. horizontal

2. less

   .progress .bar {
   

   .transition(width 2s ease-in-out);
   }

3. scss

   .progress.vertical .progress-bar {
   

   @include transition(width 2s ease-in-out);
   }

4. css

   .progress .bar {
   

   -webkit-transition: width 2s ease-in-out;
       -moz-transition: width 2s ease-in-out;
       -ms-transition: width 2s ease-in-out;
       -o-transition: width 2s ease-in-out;
       transition: width 2s ease-in-out;
   }

5. vertical

6. less

   .progress.vertical .bar {
   

   .transition(height 2s ease-in-out);
   }

7. scss

   .progress.vertical .bar {
   

   @include transition(height 2s ease-in-out);
   }

8. css

   .progress.vertical .bar {
   

   -webkit-transition: height 2s ease-in-out;
       -moz-transition: height 2s ease-in-out;
       -ms-transition: height 2s ease-in-out;
       -o-transition: height 2s ease-in-out;
       transition: height 2s ease-in-out;
   }