第1篇博客，还望大家支持下。。

bootstrap-progressbar 一款基于Twitter Bootstrap构建的多颜色、多状态进度条。可用于创建包括三种颜色或区域的进度条。绿色（成功 (0 - 50%)）- 橙色（预警(50 - 90%)） - 红（危险(90 - 100%)）。

下载地址：https://github.com/geersch/bootstrap-progressbar/zipball/master

下面是入门的简单示例

Demo

<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type='text/javascript' src="jquery-1.8.1.js"></script>
<script type='text/javascript' src="bootstrap-progressbar.js"></script>

<div class="container">
    <div id="progressbar"></div>
    </br>
    <!--以百分比显示进度-->
    <span  id="percent" class="pull-right badge"></span>
</div>

<script type="text/javascript">
$('#progressbar').progressbar({//初始化进度条
			warningMarker: 50,//设置预警开始的位置
			dangerMarker: 75,//设置危险开始的位置
			maximum: 100,//设置进度条的总大小
			step: 1//设置每次进度条被渲染(更新)自动增加的数字
		});
//创建定时器自动更新进度		
var interval = setInterval(function () {
    //调用stepIt方法，
	//该方法会自动将当前值(current position) 加上 "step"参数设置的值 ，然后渲染(更新)
	$('#progressbar').progressbar('stepIt');				
}, 1000);
//设置更新事件		
$('#progressbar').on("positionChanged", function (e) {//显示进度
		//$("#position2").val(e.position);
	$("#percent").html(e.percent + "%");
	if(e.position == 100)
	   clearInterval(interval);
});
</script>

"positionChanged"是该插件的唯一事件，进度条每次被更新时被触发。可以通过position、percent获得当前进度，及百分比形式。

官方的例子中还提供了与Knockout.js结合使用的例子：http://geersch.github.com/bootstrap-progressbar/demo.html可以参考下。