使用Bootstrap打造特色進(jìn)度條效果
更新時間：2017年05月02日 08:50:21 作者：成兮
這篇文章給大家分享了基于bootstrap打造的特色進(jìn)度條效果，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
Bootstrap基本進(jìn)度條實現(xiàn)
1.外層容器使用class=progress類樣式
2.真正顯示進(jìn)度條樣式的容器使用class=progress-bar類樣式
示例:
<div class="progress"> <div class="progress-bar"></div> <!--可以添加width來設(shè)置進(jìn)度條當(dāng)前加載的百分比--> <div class="progress-bar" style="width: 10%;"></div> <!--可以指定文本值來顯示當(dāng)前進(jìn)度條的信息--> <div class="progress-bar" style="width: 10%;">10%</div> <!--如果當(dāng)前進(jìn)度條進(jìn)度為0，又想讓進(jìn)度條底層顯示一點，可以指定min-width--> <div class="progress-bar" style="width: 0;min-width: 2px"></div> </div>
效果圖
彩色進(jìn)度條
顏色進(jìn)度條類樣式添加在里層容器中，和progress-bar添加在同一個容器中
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：錯誤進(jìn)度條，紅色
效果圖
條紋進(jìn)度條
條紋進(jìn)度條類樣式為:class="progress-striped"，添加在外層容器中，也就是和progress添加在一起
progress-striped
效果圖
自定義開發(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延遲是因為進(jìn)度條加載到100需要時間，如果不進(jìn)行延遲會出現(xiàn)：已經(jīng)顯示加載完成，而進(jìn)度條還沒有加載完畢
window.setTimeout(function(){$("#probar").text("加載完成");},800);
}
};
var addpro = window.setInterval($.fn.addprofun,100);
</script>
好了，內(nèi)容到此結(jié)束，希望對大家有所幫助！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)“全選”和"全不選"功能代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了JS實現(xiàn)的DOM插入節(jié)點操作,結(jié)合實例形式分析了javascript針對頁面dom元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)移動端輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
使用JS監(jiān)聽鍵盤按下事件（keydown event）
這篇文章主要介紹了使用JS監(jiān)聽鍵盤按下事件（keydown event），本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了js操作數(shù)組函數(shù),實例分析了JavaScript針對數(shù)組刪除指定元素、去重及刪除指定下標(biāo)元素的實現(xiàn)方法,需要的朋友可以參考下2015-12-12
JavaScript下一版本標(biāo)準(zhǔn)ES6的Set集合使用詳解
ES6：全稱ECMAScript 6.0，是JavaScript語言的國際標(biāo)準(zhǔn)，JavaScript是ECMAScript的實現(xiàn)。今天我們就來學(xué)習(xí)一下ES6的Set集合的使用
2023-02-02 
以前有人會說，new Function的方式是幾乎與eval相等，今天我查了一下，確實是不同的東西，說這句話的人太不負(fù)責(zé)了。關(guān)于eval和new function，得到的結(jié)果都是一致的，都會叫你不要去使用它們。所以結(jié)論就是“不得不”才使用
2012-12-12 
Bootstrap中輪播圖插件叫作Carousel ，下面通過本文給大家詳細(xì)介紹了bootstrop中實現(xiàn)輪播圖效果，需要的朋友參考下
2017-06-06 
微信小程序6位或多位驗證碼密碼輸入框功能的實現(xiàn)代碼
這篇文章主要介紹了微信小程序6位或多位驗證碼密碼輸入框功能的實現(xiàn)代碼,實現(xiàn)思路很簡單，需要的朋友可以參考下
2018-05-05