CSS3实现动态进度条

CSS3的线性渐变使制造动态进度条成为可能。现在就来一步一步讲解如何创建动态进度条吧。以Chrome浏览器webkit内核为例。

目标：

单个矩形条背景

目标进度条，背景是淡蓝色，上面平铺了一层倾斜的深蓝色条状矩形。我们可以这样写：

.box{
width:200px;
height:30px;
background: -webkit-linear-gradient(0deg, #83a7cf 0, #83a7cf 10px,#93b3d6 10px, #93b3d6 20px);
}
<div class="box"></div>

这里用到了线性渐变 -webkit-linear-gradient(逆时针倾斜的角度, 颜色值 开始的位置, 颜色值 开始的位置,颜色值 开始的位置, 颜色值 开始的位置)；

第一个参数除了使用倾斜角度，还可以使用“top right bottom left”,颜色值开始的位置可以用px也可以用百分数。感兴趣的可以仔细研究一下这个属性，可以制作出各种各样的神奇效果哦。

首先，我们在0-10px之间绘制了一个深蓝色的矩形条，接着又在10-20px之间绘制了一个淡蓝色的矩形条，浏览器默认将淡蓝色向后填充，因此绘制出上图。

repeat 矩形条

现在，我们希望将深蓝和浅蓝相间的矩形条重复绘制。只要修改下面一个属性即可。

background: -webkit-repeating-linear-gradient(0deg, #83a7cf 0, #83a7cf 10px,#93b3d6 10px, #93b3d6 20px);

倾斜一定角度

大概的形状已经有啦，现在修改倾斜角度即可。现逆时针旋转30度吧~

background: -webkit-repeating-linear-gradient(30deg, #83a7cf 0, #83a7cf 10px,#93b3d6 10px, #93b3d6 20px);

动起来

现在是不是已经很接近了？现在主要想让它动起来。这个时候我们可以用到CSS3的keyframe属性，来改变box的背景的位置，让它自动运动。因此，box的长度需要增加，同时需要一个盒子来使box超出的部分隐藏掉。

.wrap{
width: 200px;
height: 30px;
border-radius: 15px;
margin: 40px;
overflow: hidden;
}
.box{
width:400px;
height:30px;
background: -webkit-repeating-linear-gradient(30deg, #83a7cf 0, #83a7cf 10px,#93b3d6 10px, #93b3d6 20px);
-webkit-animation: move 5s linear infinite;
}
@-webkit-keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: -200px 0;
}
}
<div class="wrap">
<div class="box">
</div>
</div>

添加文字

最后在box里面添加文字和相应的样式就可以了

.text{
width: 200px;
height: 30px;
text-align: center;
line-height: 30px;
color: #ece8e8;
font-family: arial;
}
<div class="wrap">
<div class="box">
<div class="text">LOADING...</div>
</div>
</div>