【常見】CSS3進度條Loading動畫（一）

現在，GIF 格式的進度條已經越來越少，CSS 進度條如雨后春筍般涌現。CSS3的崛起，更使得動態效果得以輕松實現，未來，必定是CSS3的天下，所以今天我就來分享一下幾個常見的CSS3進度條Loading動畫。

首先，我們來看一下大概要講的幾種進度條都長啥樣：

 

 

現在開始，來講一下各進度條的做法：

第一個進度條，

先上代碼：

    <div id="caseVerte">
        <div id="case1"></div>
        <div id="case2"></div>
        <div id="case3"></div>
        <div id="case4"></div>
        <div id="case5"></div>
        <div id="case6"></div>
        <div id="load">
            <p>loading ...</p>
        </div>
    </div>

可以看到，要想實現這個進度條動畫，所需的HTML結構非常簡單，那么CSS部分呢？

    <style>
        body {
            background-color : grey;
        }
        div {
            margin : 5px;
        }
        #caseVerte {
            background-color : #30bf82;
            height : 140px;
            width : 150px;
            padding-top : 10px;
        }
        #caseVerte #load {
            color : #fbfbfb;
            font-family : calibri;
            text-align : center;
        }
        #caseVerte #case1 {
            height  : 10px;
            width : 100px;
            background-color : #fbfbfb;
            animation : case1 2.25s infinite;
        }
        @keyframes case1 {
            0% {width : 0%;}
            50% {width : 90px;}
            100% {width : 0%;}
        }
        #caseVerte #case2 {
            height : 10px;
            width : 10px;
            background-color : #fbfbfb;
            animation : case2 2s infinite;
        }
        @keyframes case2 {
            0% {width : 0%;}
            50% {width : 100px;}
            100% {width : 0%;}
        }
        #caseVerte #case3 {
            height : 10px;
            width : 10px;
            background-color : #fbfbfb;
            animation : case3 1.75s infinite;
        }
        @keyframes case3 {
            0% {width : 0%;}
            50% {width : 95px;}
            100% {width : 0%;}
        }
        #caseVerte #case4 {
            height : 10px;
            width : 10px;
            background-color : #fbfbfb;
            animation : case3 2.5s infinite;
        }
        @keyframes case4 {
            0% {width : 0%;}
            50% {width : 80px;}
            100% {width : 0%;}
        }
        #caseVerte #case5 {
            height : 10px;
            width : 10px;
            background-color : #fbfbfb;
            animation : case3 1.5s infinite;
        }
        @keyframes case5 {
            0% {width : 0%;}
            50% {width : 105px;}
            100% {width : 0%;}
        }
        #caseVerte #case6 {
            height : 10px;
            width : 10px;
            background-color : #fbfbfb;
            animation : case3 5s infinite;
        }
        @keyframes case6 {
            0% {width : 0%;}
            50% {width : 75px;}
            100% {width : 0%;}
        }
    </style>

我們將代碼拆分一下：

第一步，先設定一下body的背景顏色，再給所有的div設置一個外邊距，使得每個div之間產生一定布局距離。

body { background-color : grey;}
div { margin : 5px;}

第二步，我們開始寫進度條的容器，以及對loading文字部分進行處理,都是基本樣式，沒什么可說的。

#caseVerte {background-color : #30bf82; height : 140px; width : 150px; padding-top : 10px;}
#caseVerte #load {color : #fbfbfb; font-family : calibri; text-align : center;}

第三步，開始處理進度條中長度節奏變化的矩形，這里我們使用CSS里面的動畫屬性，設定關鍵幀@keyframes在不同進度寬度不同。

#caseVerte #case1 {height  : 10px; width : 100px; background-color : #fbfbfb; animation : case1 2.25s infinite;}
@keyframes case1 {
　　0% {width : 0%;}
　　50% {width : 90px;}
　　100% {width : 0%;}
}

最后，通過上邊的代碼我們已經做好了該進度條動畫的第一個動畫塊，后面要做的就是復制粘貼，給每一個動畫塊加上動畫屬性，並調整具體屬性值，如矩形的寬度、動畫時間，通過瀏覽器查看效果，調整到滿意為止即可。

這樣，我們的第一個CSS3進度條Loading動畫就做完了，來感受一下：

 

第一個進度條動畫會做了，第二個是不是也會做了？改一下顏色就行了，第七個是不是也很容易？把動畫中寬度的變化改為高度的變化就OK了~~

那么，今天就先分享這么多！

（未完，待續。。。）