bootstrap-progressbar是一款功能非常齐全的基于Bootstrap的jQuery进度条插件。该bootstrap进度条插件提供了对所有版本的Bootstrap的支持。它通过jQueryCSS3 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-valueminaria-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-amountmax-amountmin-amount
  • update:进度条正在进行动画时的回调函数。它依赖于refresh_speed。它有两个参数:当前百分比值和进度条对象的引用。
  • done:当进度条动画结束时的一个回调函数。它有一个参数:进度条对象的引用。
  • fail:当进度条发生错误时的回调函数。它有一个参数:错误信息。

定制

对齐方式(alignment)

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

<div class="progress right">                
              

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

<div class="progress vertical">                
              

要使用垂直进度条并使它底部对齐,你可以在progress元素上添加verticalbottom 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/