Bootstrap ProgressbarjQuery 的進(jìn)度條插件

Bootstrap Progressbar 是一個 jQuery 插件，擴(kuò)展了基本引導(dǎo)進(jìn)度。它通過添加 Javascript 中預(yù)先存在的 CSS 轉(zhuǎn)換提供了動態(tài)進(jìn)度條。此外，你可以在動態(tài)進(jìn)度條中通過回調(diào)顯示當(dāng)前進(jìn)度信息。

代碼示例：

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

   • less

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

   • scss

     .progress.vertical .progress-bar {
         @include transition(width 2s ease-in-out);
     }

   • 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;
     }

2. vertical

   • less

     .progress.vertical .bar {
         .transition(height 2s ease-in-out);
     }

   • scss

     .progress.vertical .bar {
         @include transition(height 2s ease-in-out);
     }

   • 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;
     }