CSS3轻松实现清新 Loading 效果的简单实例

至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。

第一种效果：

HTML部分

1. <div class="loading">  
2.      <span></span>  
3.      <span></span>  
4.      <span></span>  
5.      <span></span>  
6.      <span></span>  
7. </div>  

CSS3部分

1. .loading{   
2.      width: 80px;   
3.      height: 40px;   
4.      margin: 0 auto;   
5.      margin-top:100px;   
6.  }   
7.  .loading span{   
8.      display: inline-block;   
9.      width: 8px;   
10.      height: 100%;   
11.      border-radius: 4px;   
12.      background: lightgreen;   
13.      -webkit-animation: load 1s ease infinite;   
14.  }   
15.  @-webkit-keyframes load{   
16.      0%,100%{   
17.          height: 40px;   
18.          background: lightgreen;   
19.      }   
20.      50%{   
21.          height: 70px;   
22.          margin: -15px 0;   
23.          background: lightblue;   
24.      }   
25.  }   
26.  .loading span:nth-child(2){   
27.      -webkit-animation-delay:0.2s;   
28.  }   
29.  .loading span:nth-child(3){   
30.      -webkit-animation-delay:0.4s;   
31.  }   
32.  .loading span:nth-child(4){   
33.      -webkit-animation-delay:0.6s;   
34.  }   
35.  .loading span:nth-child(5){   
36.      -webkit-animation-delay:0.8s;   
37.  }  

第二种效果：

HTML部分

1. <div class="loadEffect">  <