用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，你好啊。