CSS实现动态进度条

需要实现的效果：

如果不看讲解，可直接拉最底下

看最后代码

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

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

 

 提示：这里用到了线性渐变 -webkit-linear-gradient(逆时针倾斜的角度, 颜色值 开始的位置, 颜色值 开始的位置,颜色值 开始的位置, 颜色值 开始的位置)； 
第一个参数除了使用倾斜角度，还可以使用“top right bottom left”,颜色值开始的位置可以用px也可以用百分数。感兴趣的可以仔细研究一下这个属性，可以制作出各种各样的神奇效果哦。 
首先，我们在0-10px之间绘制了一个深蓝色的矩形条，接着又在10-20px之间绘制了一个淡蓝色的矩形条，浏览器默认将淡蓝色向后填充。

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

-webkit-linear-gradient 线性渐变

-webkit-repeating-linear-gradient重复线性渐变

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;
    }
.text{
        width: 200px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #ece8e8;
        font-family: arial;
    }
 
    @-webkit-keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: -200px 0;
        }
    }
    <div class="wrap">
        <div class="box">
        </div>
    </div>
 

<div class="wrap">
    <div class="box">
        <div class="text">LOADING...</div>
    </div>
</div>

完成！