使用Bootstrap打造特色進(jìn)度條效果
Bootstrap基本進(jìn)度條實(shí)現(xiàn)
1.外層容器使用class=progress類樣式
2.真正顯示進(jìn)度條樣式的容器使用class=progress-bar類樣式
示例:
<div class="progress"> <div class="progress-bar"></div> <!--可以添加width來(lái)設(shè)置進(jìn)度條當(dāng)前加載的百分比--> <div class="progress-bar" style="width: 10%;"></div> <!--可以指定文本值來(lái)顯示當(dāng)前進(jìn)度條的信息--> <div class="progress-bar" style="width: 10%;">10%</div> <!--如果當(dāng)前進(jìn)度條進(jìn)度為0，又想讓進(jìn)度條底層顯示一點(diǎn)，可以指定min-width--> <div class="progress-bar" style="width: 0;min-width: 2px"></div> </div>
效果圖
彩色進(jìn)度條
顏色進(jìn)度條類樣式添加在里層容器中，和progress-bar添加在同一個(gè)容器中
1.progress-bar：默認(rèn)主題色，深藍(lán)色
2.progress-bar-success：成功進(jìn)度條，綠色
2.progress-bar-info：信息進(jìn)度條，藍(lán)色
3.progress-bar-warning：警告進(jìn)度條，黃色
4.progress-bar-danger：錯(cuò)誤進(jìn)度條，紅色
效果圖
條紋進(jìn)度條
條紋進(jìn)度條類樣式為:class="progress-striped"，添加在外層容器中，也就是和progress添加在一起
progress-striped
效果圖
自定義開(kāi)發(fā)模擬加載進(jìn)度條（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);
//這里設(shè)置800延遲是因?yàn)檫M(jìn)度條加載到100需要時(shí)間，如果不進(jìn)行延遲會(huì)出現(xiàn)：已經(jīng)顯示加載完成，而進(jìn)度條還沒(méi)有加載完畢
window.setTimeout(function(){$("#probar").text("加載完成");},800);
}
};
var addpro = window.setInterval($.fn.addprofun,100);
</script>
好了，內(nèi)容到此結(jié)束，希望對(duì)大家有所幫助！
相關(guān)文章
JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面dom元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
JavaScript實(shí)現(xiàn)移動(dòng)端輪播效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)移動(dòng)端輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
使用JS監(jiān)聽(tīng)鍵盤按下事件（keydown event）
這篇文章主要介紹了使用JS監(jiān)聽(tīng)鍵盤按下事件（keydown event），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
js操作數(shù)組函數(shù)實(shí)例小結(jié)
這篇文章主要介紹了js操作數(shù)組函數(shù),實(shí)例分析了JavaScript針對(duì)數(shù)組刪除指定元素、去重及刪除指定下標(biāo)元素的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12
JavaScript下一版本標(biāo)準(zhǔn)ES6的Set集合使用詳解
在bootstrap中實(shí)現(xiàn)輪播圖實(shí)例代碼
微信小程序6位或多位驗(yàn)證碼密碼輸入框功能的實(shí)現(xiàn)代碼