使用Bootstrap打造特色进度条效果


Posted in Javascript onMay 02, 2017

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>

效果图

使用Bootstrap打造特色进度条效果

彩色进度条

颜色进度条类样式添加在里层容器中,和progress-bar添加在同一个容器中

1.progress-bar:默认主题色,深蓝色

2.progress-bar-success:成功进度条,绿色

2.progress-bar-info:信息进度条,蓝色

3.progress-bar-warning:警告进度条,黄色

4.progress-bar-danger:错误进度条,红色

效果图

使用Bootstrap打造特色进度条效果

条纹进度条

条纹进度条类样式为:class="progress-striped",添加在外层容器中,也就是和progress添加在一起
progress-striped

效果图

使用Bootstrap打造特色进度条效果

自定义开发模拟加载进度条(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>

好了,内容到此结束,希望对大家有所帮助!

Javascript 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
layui 实现表格某一列显示图标
Sep 19 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 #Javascript
js实现字符全排列算法的简单方法
May 01 #Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 #Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 #jQuery
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 #Javascript
node.js 抓取代理ip实例代码
Apr 30 #Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 #Javascript
You might like
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
DWR Ext 加载数据
2009/03/22 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
python实现识别相似图片小结
2016/02/22 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python argparse模块使用方法解析
2020/02/20 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
python selenium操作cookie的实现
2020/03/18 Python
Python 代码调试技巧示例代码
2020/08/11 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
营业员个人总结的自我评价
2013/10/25 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
党课培训心得体会
2014/09/02 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
个人剖析材料范文
2014/09/30 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书