bootstrap progress 動態進度條
阿新 • • 發佈:2018-11-29
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); )};