Bootstrap基本進度條實現(xiàn)
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
效果圖
自定義開發(fā)模擬加載進度條（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需要時間，如果不進行延遲會出現(xiàn)：已經(jīng)顯示加載完成，而進度條還沒有加載完畢 window.setTimeout(function(){$("#probar").text("加載完成");},800); } }; var addpro = window.setInterval($.fn.addprofun,100);</script>好了，內(nèi)容到此結(jié)束，希望對大家有所幫助！
新聞熱點
疑難解答
