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/