bootstrap-progressbar是一款功能非常齐全的基于Bootstrap的jQuery进度条插件。该bootstrap进度条插件提供了对所有版本的Bootstrap的支持。它通过jQuery和CSS3 transition完成进度条的动画功能，并且可以显示当前的进度百分比信息。

安装

可以通过Bower来安装这个bootstrap进度条插件。

bower install bootstrap-progressbar

使用方法

基本使用方法

使用该bootstrap进度条插件要引入bootstrap-progressbar.js文件。

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

然后就可以使用下面的方法来初始化该进度条插件。

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

你可以设置aria属性并移除进度条的宽度样式。

1、data-transitiongoal

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

2、aria-valuemin（最小值，默认为0），aria-valuemax（最大值，默认为100）

<div class="progress">
    <div class="progress-bar" data-transitiongoal="75" aria-valuemin="-1337" aria-valuemax="9000"></div>
</div>
使用扩展
  • 是否需要额外的CSS样式？
    • 对于没有填充或文本的水平进度条不需要添加样式表。
    • 对于需要将文本居中或居右对齐的水平或垂直进度条，需要添加bootstrap-progressbar.css文件。 
      <link rel="stylesheet" type="text/css" href="bootstrap-progressbar.css">
  • 多重触发：你可以随时触发一个或多个进度条。

配置参数

默认配置

该进度条插件的默认配置如下：

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：进度条动画开始之前的延迟时间。单位毫秒。
  • refresh_speed：文本刷新的速度，单位毫秒。aria-valuenow刷新会更新，update方法会被调用。
  • display_text：确定在进度条的什么地方显示文本。
    • none：无文字。
    • fill：文字在填充条上。
    • center：文字居中。
  • use_percentage：如果显示文字，这个选项用于决定是显示百分比还是数量值。如果use_percentage设置为false，并且没有设置aria-valuemin和aria-valuemax，这时显示的数值是一样的，并会使用amount_format来格式化最后的结果。

    示例：

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

    设置use_percentage: true时会显示：75%

    设置use_percentage: false时会显示：75 / 100

  • percent_format：在使用use_percentage: true时，该参数作为一个函数返回进度条的格式文本。它有三个参数：current-amount、max-amount和min-amount。
  • update：进度条正在进行动画时的回调函数。它依赖于refresh_speed。它有两个参数：当前百分比值和进度条对象的引用。
  • done：当进度条动画结束时的一个回调函数。它有一个参数：进度条对象的引用。
  • fail：当进度条发生错误时的回调函数。它有一个参数：错误信息。

定制

对齐方式（alignment）

要使水平进度条居右对齐，你可以在进度条元素上使用right class。

<div class="progress right">

要使用垂直进度条，你可以在progress元素上添加vertical class。

<div class="progress vertical">

要使用垂直进度条并使它底部对齐，你可以在progress元素上添加vertical和bottom class。

<div class="progress vertical bottom">
动画（animation）

要改变进度条的动画，你要修改less 或 css文件。

水平进度条（horizontal）

Less

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

Sass

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

垂直进度条（vertical）

Less

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

Sass

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

关于该Boostrap进度条插件的详细信息请参考它的官方主页：http://www.minddust.com/project/bootstrap-progressbar/