基本样式
要实现进度条效果要使用两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。例如:
rush:js;">
progress样式主要设置进度条容器的背景色,容器高度、间距等,progress-bar样式设置进度,主要是设置了进度条的背景颜色和过渡效果。实现源码如下:
rush:js;">
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-Box-shadow: inset 0 1px 2px rgba(0,.1);
Box-shadow: inset 0 1px 2px rgba(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,.15);
Box-shadow: inset 0 -1px 0 rgba(0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
彩色进度条
在基础的进度条上追加对应的类名即可:
.progress-bar-info:信息进度条,进度条颜色为蓝色 .progress-bar-success:成功进度条,进度条颜色为绿色 .progress-bar-warning:警告进度条,进度条颜色为黄色 .progress-bar-danger:错误进度条,进度条颜色为红色
实现源码如下:
rush:js;">
.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}
条纹进度条
要实现条纹进度条效果只需要在进度条的容器“progress”基础上增加类名“progress-striped”即可。 实现源码如下:
rush:js;">
.progress-striped .progress-bar,.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg,rgba(255,255,.15) 25%,transparent 25%,transparent 50%,.15) 50%,.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,transparent);
background-image: linear-gradient(45deg,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg,transparent);
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg,transparent);
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(45deg,transparent);
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg,transparent);
}
动态条纹进度条
在进度条“progress progress-striped”两个类的基础上再加入“active”类名即可。例如:
rush:js;">
实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画,这个动画主要做了一件事,就是改变背景图像的位置,也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的,而linear-gradient实现的正是对应背景中的背景图片。动画的实现源码如下:
rush:js;">
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-o-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;
}
}
调用动画的实现源码如下:
rush:js;">
.progress.active .progress-bar,.progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
层叠进度条
层叠进度条可以将不同状态的进度条放置在一起,按水平方式排列。例如: