首页
所有分类
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 相关文章推荐
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
详解json串反转义（消除反斜杠）
Aug 12 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
俄罗斯购物网站(137) 澳大利亚购物网站(309) 墨西哥购物网站(16) 台湾购物网站(77) 印尼购物网站(37) 马来西亚购物网站(41) 法国购物网站(144) 埃及购物网站(2) 印度购物网站(45) 丹麦购物网站(22)
You might like
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php redis实现文章发布系统（用户投票系统）
2017/03/04 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事！
2012/01/15 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
javascript实现视频弹幕效果（两个版本）
2019/11/28 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python简单实例训练(21~30)
2017/11/15 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
美国著名珠宝品牌之一：Jared The Galleria Of Jewelry
2016/10/01 全球购物
We Fashion荷兰：一家国际时装公司
2018/04/18 全球购物
美国农场商店：Blain’s Farm & Fleet
2020/01/17 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
教师党员个人总结
2015/02/10 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android