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>