使用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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
php下删除字符串中HTML标签的函数
2008/08/27 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript中的面向对象介绍
2012/06/30 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
Django nginx配置实现过程详解
2020/09/10 Python
python切割图片的示例
2020/11/12 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
融资合作协议书范本
2014/10/17 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
mysql 获取时间方式
2022/03/20 MySQL
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技