bootstrap progress 动态进度条

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/sinat_28505133/article/details/80832112

html代码：

<!--外层容器-->
	<div id="wrapper" style="padding-left: 20%;padding-right:20%">
		<div class="progress progress-striped active" >
	        <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width:0%;min-width: 3em;">
	            <span id="proglabel">正在发送...</span>
	        </div>
	    </div>    
    </div>    

js

$().ready(function() {

	// 模拟进度条：百分数增加，0-30时为红色，30-60为黄色，60-90为蓝色，>90为绿色
	var value = 0;
	setInterval(function(e){
		if (value != 100) {
			value = parseInt(value) + 1;
			$("#prog").css("width", value + "%").text(value + "%");
			if (value>=0 && value<=30) {
				$("#prog").addClass("progress-bar-danger");
		    } else if (value>=30 && value <=60) {
		    	$("#prog").removeClass("progress-bar-danger");
		        $("#prog").addClass("progress-bar-warning");
		    } else if (value>=60 && value <=90) {
		        $("#prog").removeClass("progress-bar-warning");
		        $("#prog").addClass("progress-bar-info");
		    } else if(value >= 90 && value<100) {
		        $("#prog").removeClass("progress-bar-info");
		        $("#prog").addClass("progress-bar-success");    
		    }
		}
	}, 50);
)};