网站建设系列是收集网站使用到的各种demo。包括 JavaScript 插件，JavaScript组件，常用 css 等多方面。
主要参考bootcdn，以及GitHub上的资源进行说明。如果时间允许，会将这些所有内容进行逐一对比。
一、算是实用型的 bootstrap-progressbar.js（demo3.html）
该插件的特点：
特点：支持横纵向的进度条，明确支持回调，两类进度显示
缺点：设置进度时，要操作的代码比较代码多（没有提供单独设置进度的方法）。
推荐指数：2.5星
资源地址：
https://github.com/minddust/bootstrap-progressbar
demos：
http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-3-4
二、源码分析
1. 配置项默认值
代码语言：javascript复制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: 每个进度值之间，等待多少毫秒更新；
display_text: 定义文本显示的位置，none-不显示，fill-整个进度轴中间，center-整个进度条中间；
use_percentage: 前提条件是display_text不为'none'。文本是否使用百分比的方式显示，即按 percent_format 显示，还是按amount_format 显示；
update: 进度更新时的回调函数
done：进度更新完成后的回调函数
fail：进度更新失败后的回调函数
2. 初始化
这段代码和 demo2 的区别在于：参数只支持 object 类型，其他逻辑与demo2（网站建设（一）进度条（二））相同。
核心代码在 transition 方法中
3. transition 方法
先初始化一些参数和进度条必要的值（当前值，最大值，最小值等等）。
处理文本的显示方式，和进度条样式初始化（可能是垂直，也可能是水平）
之后在 setTimeout 方法（transition_delay毫秒后执行某些功能）中设置 interval （每 refresh_speed 毫秒执行一遍代码，当当前进度 >= 进度最大值时，清除 interval）。
4. 使用
该插件代码中没有难点，想要设置进度条的值只能通过“data-transitiongoal”属性设置
html：
代码语言：javascript复制<div class="progress">
<div class="progress-bar"
role="progressbar"
data-transitiongoal="75">
</div>
</div>JavaScript：
代码语言：javascript复制$(document).ready(function() {
$('.progress .progress-bar')
.progressbar({display_text: 'center'});
});
