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

 更新时间:2017年05月02日 08:50:21   作者:成兮   我要评论
这篇文章给大家分享了基于bootstrap打造的特色进度条效果,非常不错,具有参考借鉴价值,需要的朋友参考下吧

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>

效果图

这里写图片描述

彩色进度条

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

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

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

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

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

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

效果图

这里写图片描述

条纹进度条

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

效果图

这里写图片描述

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

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

相关文章

  • IE6/7/8中Option元素未设value时Select将获取空字符串

    IE6/7/8中Option元素未设value时Select将获取空字符串

    可以看到当忘记写option的value时这些现代浏览器都会尽量返回正确的(客户端程序员想要的)结果value,其容错性比IE6/7/8做的更好。
    2011-04-04
  • JSON生成Form表单的方法示例

    JSON生成Form表单的方法示例

    JSON表单是一个基于React的抽象组件,它可以把JSON数据格式描述的表单转换成项目中的表单,这篇文章主要介绍了JSON生成Form表单的方法示例,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 详解javascript函数的参数

    详解javascript函数的参数

    javascript函数可以用任意多个参数来调用,而不用管函数定义时指定了几个参数。因为函数是弱类型的,没有方法去声明它所期望的参数类型,并且给任何函数传递任何类型的值都是合法的
    2015-11-11
  • jquery下onpropertychange事件的绑定方法

    jquery下onpropertychange事件的绑定方法

    用了onchange事件,但是在输入的时候,用Javascript计算出并填值的那一列并不会响应onchange 事件。
    2010-08-08
  • Bootstrap实现带暂停功能的轮播组件(推荐)

    Bootstrap实现带暂停功能的轮播组件(推荐)

    最近小编在项目中用到了一款带轮播组件,功能非常齐全,可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能,下面小编通过本文给大家详细介绍下实现过程,需要的朋友参考下吧
    2016-11-11
  • javascript比较语义化版本号的实现代码

    javascript比较语义化版本号的实现代码

    这篇文章先是给大家简单的介绍了下语义化版本号,而后再用实例代码演示语义化版本号的比较方法,有需要的朋友们可以参考借鉴。
    2016-09-09
  • csdn 博客中实现运行代码功能实现

    csdn 博客中实现运行代码功能实现

    有时候因为csdn的博客经常处理一些字符,导致代码很多情况下,都不能正常运行,给大家的阅读带来了麻烦,下面是脚本之家编辑简单的整理下。
    2009-08-08
  • 微信小程序实现的涂鸦功能示例【附源码下载】

    微信小程序实现的涂鸦功能示例【附源码下载】

    这篇文章主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2018-01-01
  • 基于Flowplayer打造一款免费的WEB视频播放器附源码

    基于Flowplayer打造一款免费的WEB视频播放器附源码

    Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。下面本篇文章给大家介绍基于Flowplayer打造一款免费的WEB视频播放器,需要的朋友可以参考下
    2015-09-09
  • js实现将选中内容分享到新浪或腾讯微博

    js实现将选中内容分享到新浪或腾讯微博

    这篇文章主要介绍了js实现将选中内容分享到新浪或腾讯微博,需要的朋友可以参考下
    2015-12-12

最新评论