【常见】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 {<