Bootstrap基本進度條實現

1.外層容器使用class=progress類樣式
2.真正顯示進度條樣式的容器使用class=progress-bar類樣式

示例:
<div class="progress">
    <div class="progress-bar"></div>
    <!--可以新增width來設定進度條當前載入的百分比-->
    <div class="progress-bar" style="width: 10%;"></div>
    <!--可以指定文字值來顯示當前進度條的資訊-->
 

    <div class="progress-bar" style="width: 10%;">10%</div>
    <!--如果當前進度條進度為0，又想讓進度條底層顯示一點，可以指定min-width-->
    <div class="progress-bar" style="width: 0;min-width: 2px"></div>
</div>

效果圖

彩色進度條

顏色進度條類樣式新增在裡層容器中，和progress-bar新增在同一個容器中
1.progress-bar：預設主題色，深藍色
2.progress-bar
 
-success：成功進度條，綠色
2.progress-bar-info：資訊進度條，藍色
3.progress-bar-warning：警告進度條，黃色
4.progress-bar-danger：錯誤進度條，紅色

效果圖

條紋進度條

條紋進度條類樣式為:class="progress-striped"，新增在外層容器中，也就是和progress新增在一起
progress-striped

效果圖

自定義開發模擬載入進度條（bootstrap+jquery）

<div class="progress progress-striped">
    <div
 
 class="progress-bar" id="probar" style="width: 0%">0%</div>
</div>

<script>
    var sum = 0;
    $.fn.addprofun = function(){
        var add = Math.floor(Math.random()*10);
        sum += add;
        if(sum > 100)
            sum = 100;
        $("#probar").css("width",num+"%");
        $("#probar").text(num+"%");
        if(sum == 100){
            clearInterval(addpro);
            //這裡設定800延遲是因為進度條載入到100需要時間，如果不進行延遲會出現：已經顯示載入完成，而進度條還沒有載入完畢
            window.setTimeout(function(){$("#probar").text("載入完成");},800);
        }
    };
    var addpro = window.setInterval($.fn.addprofun,100);
</script>