首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap进度条组件知识详解

Posted in Javascript onMay 01, 2016

在网页中，经常见到进度条效果，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 属性。

进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本：

LESS: progress-bars.less

SASS: _progress-bars.scss

基础进度条

实现原理：

需要两个容器，外容器使用类名.progress，子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色，容器的高度，间距等；而.progress-bar设置进度方向，进度条的背景色和过度效果；下面是css源码：

progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}

例子：

<div class="progress">
<div class="progress-bar" style="width:30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">30%</span>
</div>
</div>

Bootstrap进度条组件知识详解

role属性作用：告诉搜索引擎这个div的作用是进度条；

aria-valuenow=”30”属性作用：当前进度条的进度为40%；

aria-valuemin=”0”属性作用：进度条的最小值为0%；

aria-valuemax=”100”属性作用：进度条的最大值为100%；

可以将设置了.sr-only类的<span>标签从进度条组件中移除，而让当前进度显示出来；

<div class="progress">
<div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >40%</div>
</div>

Bootstrap进度条组件知识详解

彩色进度条

彩色进度条和警告进度条一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色，主要包括以下四种：

progress-bar-info:表示信息进度条，蓝色

progress-bar-success:表示成功进度条，绿色

progress-bar-warning:表示警告进度条，黄色

progress-bar-danger:表示错误进度条，红色

css源码：

.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}

使用方法：

只需要在基础进度条上增加对应的类名即可

例子：

<h1>彩色进度条</h1>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>

效果如下：

Bootstrap进度条组件知识详解

条纹进度条

条纹进度条采用css3的线性渐变来实现，并未借助任何图片，使用条纹进度条只需在进度条的容器.progress基础上追加类名”progress-striped”,如果要进度条纹像彩色进度一样，具有彩色效果，只需在进度条上增加相应得颜色类名

下面是.progress-striped样式源码：

.progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}

条纹进度对应的每种状态也有不同的颜色

.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

下面来看看条纹进度条的运用：

<h1>条纹进度条</h1>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>

Bootstrap进度条组件知识详解

动态条纹进度条

在进度条.progress 、.progress-striped两个类的基础上在加入类名.active就能实现动态条纹进度条。

其实现原理主要是通过css3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是 background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片

下面是css源码：

@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}

@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画 “progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效

调用动画对应的样式代码如下：

.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}

例子：

<h1>动态条纹进度条</h1>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>

效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：

Bootstrap进度条组件知识详解

层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

Bootstrap进度条组件知识详解

<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。

下面来看一个例子：

<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>

Bootstrap进度条组件知识详解

关于Bootstrap进度条组件知识详解到此就介绍了，希望对大家有所帮助！

Bootstrap进度条组件知识详解

- Author -

洛水三千

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
原生javascript实现匀速运动动画效果
Feb 26 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
May 05 jQuery
react-native之ART绘图方法详解
Aug 08 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 #Javascript
JS实现左右无缝轮播图代码
May 01 #Javascript
JavaScript中的继承之类继承
May 01 #Javascript
js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码
Apr 30 #Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 #Javascript
js实现的万能flv网页播放器代码
Apr 30 #Javascript
js实现的下拉框二级联动效果
Apr 30 #Javascript
XML(1) 触发器(3) IOC(3) 数据类型(8) RabbitMQ(3) Hash(1) Bean(3) metaclass(1) 入门基础(1) Geospatial(1)
You might like
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用（四）
2017/06/04 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python实现换位加密算法的示例
2018/10/14 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python word转pdf代码实例
2019/08/16 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
详解python with 上下文管理器
2020/09/02 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
法律专业个人实习自我鉴定
2013/09/23 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
干部行政关系介绍信
2014/01/17 职场文书
听课评语大全
2014/04/30 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2015大学生求职信范文
2015/03/20 职场文书
首席执行官观后感
2015/06/03 职场文书
植树节新闻稿
2015/07/17 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
nginx内存池源码解析
2021/11/20 Servers