用css3简单实现进度条

    css3是一个神奇的东西，刚才一时手痒，写了一个很简单的进度条不用js：

直接嵌套一个div，而后设置里面的div用animation动画就能够了。

html:

<div class="loading">
        <div class="progress">

        </div>
    </div>

loading css:

.loading{
            width: 300px;
            height: 15px;
            border-radius: 10px;
            border: 1px solid blue;
            box-shadow: 2px 2px 5px 1px blue;
        }

progress css:

.progress{
            width:0%;//设置起始时的进度为0
            height: 100%;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));
            border-radius: 10px;
        }

而后动画能够用animation和transition均可以来作。

以animation为例：

@-webkit-keyframes aaa{
            0%{ width: 0%; }
            30%{width:30%; }
            60%{width:60%;}
            100%{width:80%; }
        }
        .progress{
            width:0%;
            height: 100%;
          
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));
            border-radius: 10px;
           
            -webkit-animation:aaa 2s linear;
        }

这只是九牛一毛，没有作不到只有想不到的，css3，你好啊。