1、进度条

在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果：

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

☑ LESS版本：源码文件progress-bars.less

☑ Sass版本：源码文件_progress-bars.scss

☑ 编译后版本：bootstrap.css文件第4500行～第4575行

而且Bootstrap框架为大家提供多种样式风格的进度条，供大家使用.

2、进度条–基本样式

Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。

1）、使用方法：

Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单：

1
2
3
<div class="progress">
 <div class="progress-bar" style="width:40%"></div>
</div>

运行效果如下：

2）、实现原理：

前面也说了，这样的基本进度条主要分成两部分：

progress样式主要设置进度条容器的背景色，容器高度、间距等：

/bootstrap.css文件第4516行～第4524行/

1
2
3
4
5
6
7
8
9
.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样式在设置进度方向，重要的是设置了进度条的背景颜色和过渡效果：

/bootstrap.css文件第4525行～第4538行/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}

3）、结构优化：

虽然这样实现了基本进度条效果，但对于残障人员浏览网页有点困难，所以我们可以将结构做得更好些（语义化更友好些）：

1
2
3
4
5
<div class="progress">
 <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
 <span class="sr-only">40% Complete</span>
 </div>
</div>

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

2>、aria-valuenow="40"属性作用：当前进度条的进度为40%。

3>、aria-valuemin="0"属性作用：进度条的最小值为0%。

4>、aria-valuemax="100"属性作用：进度条的最大值为100%。

3、进度条–彩色进度条

Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：

☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

1）、使用方法：

具体使用就非常简单了，只需要在基础的进度上增加对应的类名。如：

1
2
3
4
5
6
7
8
9
10
11
12
<div class="progress">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

运行效果如下：

2）、实现原理：

彩色进度条与基本进度条相比，就是进度条颜色做了一定的变化，其对应的样式代码如下：

/bootstrap.css文件第4548行～第4550行/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.progress-bar-success {
 
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
 
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
 
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
 
}

4、进度条–条纹进度条

在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。

一起来看一下制作条纹进度条的结构：

1
2
3
4
5
6
7
8
9
10
11
12
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

运行效果如下：

1）、原现实现：

正如前面所说，实现条纹进度条，主要使用的是CSS3的线性渐变，其具体代码如下：

/bootstrap.css文件第4539行～第4547行/

1
2
3
4
5
.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;
}

同样的，条纹进度条对应的每种状态也有不同的颜色，使用方法与彩色进度条一样。只是样式上做了一定的调整：

/bootstrap.css文件第4551行～第4554行/

1
2
3
4
.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);
}

/bootstrap.css文件第4558行～第4561行/

1
2
3
4
.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);
}

/bootstrap.css文件第4565行～第4568行/

1
2
3
4
5
6
7
8
9
.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);
}
/*bootstrap.css文件第4572行～第4575行*/
.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);
}

5、进度条–动态条纹进度条

使用方法：

在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

1
2
3
<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

1）、实现原理：

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

/bootstrap.css文件第4500行～第4515行/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@-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;
 }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

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

/bootstrap.css文件第4544行～第4547行/

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

运行效果如下：

特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。

6、进度条–层叠进度条

Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：

1
2
3
4
5
6
<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-bar”上有一个左浮动的样式。也就是这个样式，在不增加任何样式代码就能实现上例的层叠效果。当然有一点需要注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

运行效果如下：

7、进度条–带Label的进度条

上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。

1）、实现方法：

只需要在进度条中添加你需要的值，如：

1
2
3
<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

运行效果如下：

还有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容是否会撑开一定的宽度，让进度条具有颜色呢？如果是，这不是我们需要的效果，如果不是，又是怎么实现的呢？我们先来看一个这样的示例：

1
2
3
<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

运行效果如下：

2）、原理分析：

效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。

/bootstrap.css文件第4748行~第4759行/

1
2
3
4
5
6
7
8
9
10
11
12
.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
 min-width: 30px;
}
.progress-bar[aria-valuenow="0"] {
 min-width: 30px;
 color: #777;
 background-color: transparent;
 background-image: none;
 -webkit-box-shadow: none;
  box-shadow: none;
}

注：这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码，同时也说明，Bootstrap在不断的完善之中。

以上就是关于Bootstrap进度条的全部内容介绍，并有详细的原理分析，希望对大家的学习有所帮助。

Bootstrap progress-bar的更多相关文章

  1. unity3d插件Daikon Forge GUI 中文教程5-高级控件listbox和progress bar的使用

    3.3.listbox列表框 Atlas 图集: 下面应用到的精灵都是在这里的. ListBox中的内容: 背景精灵 图片的主颜色 Padding边距 Scrollbar 滚动条对象的预制体或者对象, ...

  2. Circular progress bar in Unity 3D

    Circular progress bar in Unity 3D - UnityScripthttp://stackoverflow.com/questions/22662706/circular- ...

  3. Create a “% Complete” Progress Bar with JS Link in SharePoint 2013

    Create a “% Complete” Progress Bar with JS Link in SharePoint 2013 SharePoint 2013 has a lot new fea ...

  4. unity3d插件Daikon Forge GUI 中文教程-5-高级控件listbox和progress bar的使用

    (游戏蛮牛首发)大家好我是孙广东.官网提供了专业的视频教程http://www.daikonforge.com/dfgui/tutorials/,只是是在youtube上,要观看是须要FQ的. 只是教 ...

  5. C#控制台进度条(Programming Progress bar in C# Consle application)

    以下代码从Stack Overflow,觉得以后会用到就收藏一下,我是辛勤的搬运工,咿呀咿呀哟- 1.showing percentage in .net console application(在. ...

  6. 打印进度条——（progress bar才是专业的）

    # 打印进度条——(progress bar是专业的) import time for i in range(0,101,2): time.sleep(0.1) char_num = i//2 #打印 ...

  7. Python tqdm show progress bar

    tqdm can help to show a smart progress bar, and it is very easy to use, just wrap any iterable with  ...

  8. WPF 4 开发Windows 7 任务栏（Overlay Icon、Thumbnail Toolbar、Progress Bar）

    原文:WPF 4 开发Windows 7 任务栏(Overlay Icon.Thumbnail Toolbar.Progress Bar)      在上一篇我们介绍了如何在WPF 4 中开发Wind ...

  9. how to create a ring progress bar in web skills

    how to create a ring progress bar in web skills ring progress bar & circle progress bar canvas j ...

  10. 使用Bootstrap Bar来增加Onboarding Progress Bar功能。

    git初始代码https://github.com/chentianwei411/at-mentions-with-action-text 首先,开分支onboardingbar. 然后, rails ...

随机推荐

  1. 也来“玩”Metro UI之磁贴（一）

    Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩,动手……然后就有了本篇. Win8 ...

  2. 开源中国git关联xcode操作步骤

    1.网上代码托管有好多我选了开源中国的git 2.开源中国链接:http://git.oschina.net 3.在git上创建一个新的项目 4.打开终端全局设置名字和邮箱 tanqihongdeiM ...

  3. （转）iOS字体

    一.iOS原生字体展示 在 label中选择字体的font,并把font由system改成custom后,就能在family中看到72种特殊字体.这些里面就有很炫的字体,但 是全部是只针对英文数字,对 ...

  4. BZOJ3611 [Heoi2014]大工程 【虚树】

    题目 国家有一个大工程,要给一个非常大的交通网络里建一些新的通道. 我们这个国家位置非常特殊,可以看成是一个单位边权的树,城市位于顶点上. 在 2 个国家 a,b 之间建一条新通道需要的代价为树上 a ...

  5. 转载：shell中awk printf的用法

    转载:http://www.linuxawk.com/jiaocheng/83.html 6. printf函数   打印输出时,可能需要指定字段间的空格数,从而把列排整齐.在print函数中使用制表 ...

  6. bzoj1584 [Usaco2009 Mar]Cleaning Up 打扫卫生 动态规划+思维

    Description 有N头奶牛,每头那牛都有一个标号Pi,1 <= Pi <= M <= N <= 40000.现在Farmer John要把这些奶牛分成若干段,定义每段的 ...

  7. 【bzoj3545】[ONTAK2010]Peaks 线段树合并

    [bzoj3545][ONTAK2010]Peaks 2014年8月26日3,1512 Description 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路 ...

  8. OI 数论整理

    1.素数: 质数(prime number)又称素数,有无限个.一个大于1的自然数,除了1和它本身外,不能被其他自然数整除,换句话说就是该数除了1和它本身以外不再有其他的因数;否则称为合数. 2016 ...

  9. android的网络访问URL

    Thread visitBaiduThread = new Thread(new VisitWebRunnable());     visitBaiduThread.start();     try ...

  10. golang并发编程goroutine+channel（一）

    go语言的设计初衷除了在不影响程序性能的情况下减少复杂度,另一个目的是在当今互联网大量运算下,如何让程序的并发性能和代码可读性达到极致.go语言的并发关键词 "go" go dos ...