<>强引导基本进度条实现
1。外层容器使用类=进步类样式
2。真正显示进度条样式的容器使用类=进度条类样式
示例:
& lt; div类=敖健北?
& lt; div类=敖忍酢弊４? lt;/div>
& lt; !——可以添加宽度来设置进度条当前加载的百分比——比;
& lt; div类=敖忍酢弊４? lt;/div>
& lt; !——可以指定文本值来显示当前进度条的信息——比;
& lt; div类=敖忍酢痹?0% & lt;/div>
& lt; !——如果当前进度条进度为0,又想让进度条底层显示一点,可以指定min-width——比;
& lt; div类=敖忍酢弊４? lt;/div>
& lt;/div>
效果图
颜色进度条类样式添加在里层容器中,和进度条添加在同一个容器中
1。进度条:默认主题色,深蓝色
2。progress-bar-success:成功进度条,绿色
2。progress-bar-info:信息进度条,蓝色
3。progress-bar-warning:警告进度条,黄色
4. progress-bar-danger:错误进度条,红色
效果图
条纹进度条类样式为:类=皃rogress-striped”,添加在外层容器中,也就是和进步添加在一起
progress-striped
效果图
自定义开发模拟加载进度条(引导+ jquery)
& lt; div class="进步progress-striped”比;
& lt; div类=敖忍酢眎d=皃robar”在0% & lt;/div>
& lt;/div>
& lt; script>
var和=0;
.fn美元。addprofun=function () {
var=Math.floor添加(math . random () * 10);
+=和添加;
如果(祝辞总和;100)
金额=100;
$ (" # probar ") . css(“宽度”,num +“%”);
$ (" # probar ")。text (num +“%”);
如果(金额==100){
clearInterval (addpro);//这里设置800延迟是因为进度条加载到100需要时间,如果不进行延迟会出现:已经显示加载完成,而进度条还没有加载完毕
window.setTimeout(函数(){$ (" # probar ")。text(“加载完成”);},800);
}
};
var addpro=setinterval (.fn.addprofun 100美元);
& lt;/script>
好了,内容到此结束,希望对大家有所帮助!
