CSS3实现10种Loading效果

前端  /  管理员 发布于 7年前   511

用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

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

CSS Code复制内容到剪贴板

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.         }   
38.   

第2种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

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

CSS Code复制内容到剪贴板

1. .loading{   
2.             width: 150px;   
3.             height: 4px;   
4.             border-radius: 2px;   
5.             margin: 0 auto;   
6.             margin-top:100px;   
7.             position: relative;   
8.             background: lightgreen;   
9.             -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;   
10.         }   
11.         .loading span{   
12.             display: inline-block;   
13.             width: 16px;   
14.             height: 16px;   
15.             border-radius: 50%;   
16.             background: lightgreen;   
17.             position: absolute;   
18.             margin-top: -7px;   
19.             margin-left:-8px;   
20.             -webkit-animation: changePosition 1.04s ease-in infinite alternate;   
21.         }   
22.         @-webkit-keyframes changeBgColor{   
23.             0%{   
24.                 background: lightgreen;   
25.             }   
26.             100%{   
27.                 background: lightblue;   
28.             }   
29.         }   
30.         @-webkit-keyframes changePosition{   
31.             0%{   
32.                 background: lightgreen;   
33.             }   
34.             100%{   
35.                 margin-left: 142px;   
36.                 background: lightblue;   
37.             }   
38.         }   
39.   

第3-5种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

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

第3-5种效果的css样式分别为：

CSS Code复制内容到剪贴板

1. .loading{   
2.             width: 150px;   
3.             height: 15px;   
4.             margin: 0 auto;   
5.             position: relative;   
6.             margin-top:100px;   
7.         }   
8.         .loading span{   
9.             position: absolute;   
10.             width: 15px;   
11.             height: 100%;   
12.             border-radius: 50%;   
13.             background: lightgreen;   
14.             -webkit-animation: load 1.04s ease-in infinite alternate;   
15.         }   
16.         @-webkit-keyframes load{   
17.             0%{   
18.                 opacity: 1;   
19.                 -webkit-transform: translate(0px);   
20.             }   
21.             100%{   
22.                 opacity: 0.2;   
23.                 -webkit-transform: translate(150px);   
24.             }   
25.         }   
26.         .loading span:nth-child(1){   
27.             -webkit-animation-delay:0.13s;   
28.         }   
29.         .loading span:nth-child(2){   
30.             -webkit-animation-delay:0.26s;   
31.         }   
32.         .loading span:nth-child(3){   
33.             -webkit-animation-delay:0.39s;   
34.         }   
35.         .loading span:nth-child(4){   
36.             -webkit-animation-delay:0.52s;   
37.         }   
38.         .loading span:nth-child(5){   
39.             -webkit-animation-delay:0.65s;   
40.         }  

第6-8种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

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

第6-8种效果的css样式分别为：

CSS Code复制内容到剪贴板

1. .loading{   
2.             width: 150px;   
3.             height: 15px;   
4.             margin: 0 auto;   
5.             margin-top:100px;   
6.             text-align: center;   
7.         }   
8.         .loading span{   
9.             display: inline-block;   
10.             width: 15px;   
11.             height: 100%;   
12.             margin-right: 5px;   
13.             background: lightgreen;   
14.             -webkit-animation: load 1.04s ease infinite;   
15.         }   
16.         .loading span:last-child{   
17.             margin-right: 0px;    
18.         }   
19.         @-webkit-keyframes load{   
20.             0%{   
21.                 opacity: 1;   
22.             }   
23.             100%{   
24.                 opacity: 0;   
25.             }   
26.         }   
27.         .loading span:nth-child(1){   
28.             -webkit-animation-delay:0.13s;   
29.         }   
30.         .loading span:nth-child(2){   
31.             -webkit-animation-delay:0.26s;   
32.         }   
33.         .loading span:nth-child(3){   
34.             -webkit-animation-delay:0.39s;   
35.         }   
36.         .loading span:nth-child(4){   
37.             -webkit-animation-delay:0.52s;   
38.         }   
39.         .loading span:nth-child(5){   
40.             -webkit-animation-delay:0.65s;   
<