網友總結的18種各式各樣的loading，純html5+css3無圖片，我再次整理下
<!DOCTYPE html>
<html lang='zh_CN'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<title>APP下載</title>
</head>
<body>
昨晚用CSS3實現了幾種常見的Loading效果，雖然很簡單，但還是分享一下，順便也當是做做筆記……
第1種效果：
loading1
代碼如下：
<style>
.loading1{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading1 span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading1 span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading1 span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading1 span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading1 span:nth-child(5){
-webkit-animation-delay:0.8s;
}
</style>
<div class="loading1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
第2種效果：
loading2
代碼如下：
<style>
.loading2{
width: 150px;
height: 4px;
border-radius: 2px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightgreen;
-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loading2 span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
margin-top: -7px;
margin-left:-8px;
-webkit-animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes changePosition{
0%{
background: lightgreen;
}
100%{
margin-left: 142px;
background: lightblue;
}
}
</style>
<div class="loading2">
<span></span>
</div>
第3-5種效果：
loading3
<style>
.loading3{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading3 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load3 1.04s ease infinite;
}
.loading3 span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load3{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.loading3 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading3 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading3 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading3 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading3 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>
<div class="loading3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
loading4
<style>
.loading4{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading4 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load4 1.04s ease infinite;
}
.loading4 span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load4{
0%{
opacity: 1;
-webkit-transform: scale(1.3);
}
100%{
opacity: 0.2;
-webkit-transform: scale(.3);
}
}
.loading4 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading4 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading4 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading4 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading4 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>
<div class="loading4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
loading5
代碼如下：
<style>
.loading5{
width: 150px;
height: 15px;
margin: 0 auto;
position: relative;
margin-top:100px;
}
.loading5 span{
position: absolute;
width: 15px;
height: 100%;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load5 1.04s ease-in infinite alternate;
}
@-webkit-keyframes load5{
0%{
opacity: 1;
-webkit-transform: translate(0px);
}
100%{
opacity: 0.2;
-webkit-transform: translate(150px);
}
}
.loading5 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading5 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading5 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading5 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading5 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>
<div class="loading5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
第3-5種效果的css樣式分別爲：
第6-8種效果：
loading6
<style>
.loading6{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
text-align: center;
}
.loading6 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load6 1.04s ease infinite;
}
.loading6 span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load6{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.loading6 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading6 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading6 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading6 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading6 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>
<div class="loading6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
loading7
<style>
.loading7{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading7 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-transform-origin: right bottom;
-webkit-animation: load7 1s ease infinite;
}
.loading7 span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load7{
0%{
opacity: 1;
}
100%{
opacity: 0;
-webkit-transform: rotate(90deg);
}
}
.loading7 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading7 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading7 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading7 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading7 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>
<div class="loading7">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
loading8
代碼如下：
<style>
.loading8{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading8 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-transform-origin: right bottom;
-webkit-animation: load8 1s ease infinite;
}
.loading8 span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load8{
0%{
opacity: 1;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
-webkit-transform: rotate(90deg) scale(.3);
}
}
.loading8 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading8 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading8 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading8 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading8 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>
<div class="loading8">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
第6-8種效果的css樣式分別爲：
第9-10種效果：
loading9
<style>
.loading9{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loading9 span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load9 1.04s ease infinite;
}
@-webkit-keyframes load9{
0%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}
.loading9 span:nth-child(1){
left: 0;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.13s;
}
.loading9 span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loading9 span:nth-child(3){
left: 50%;
top: 0;
margin-left: -8px;
-webkit-animation-delay:0.39s;
}
.loading9 span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loading9 span:nth-child(5){
right: 0;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.65s;
}
.loading9 span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loading9 span:nth-child(7){
bottom: 0;
left: 50%;
margin-left: -8px;
-webkit-animation-delay:0.91s;
}
.loading9 span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
</style>
<div class="loading9">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
loading10
代碼如下：
<style>
.loading10{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loading10 span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load10 1.04s ease infinite;
}
@-webkit-keyframes load10{
0%{
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
.loading10 span:nth-child(1){
left: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.13s;
}
.loading10 span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loading10 span:nth-child(3){
left: 50%;
top: 0;
margin-left: -10px;
-webkit-animation-delay:0.39s;
}
.loading10 span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loading10 span:nth-child(5){
right: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.65s;
}
.loading10 span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loading10 span:nth-child(7){
bottom: 0;
left: 50%;
margin-left: -10px;
-webkit-animation-delay:0.91s;
}
.loading10 span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
</style>
<div class="loading10">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS樣式分別爲：
第11種效果：
loading11
代碼如下：
<style>
.loading11{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading11 span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load11 1.04s ease infinite;
}
@-webkit-keyframes load11{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 60px;
margin-top: -20px;
background: lightblue;
}
}
.loading11 span:nth-child(2){
-webkit-animation-delay:0.13s;
}
.loading11 span:nth-child(3){
-webkit-animation-delay:0.26s;
}
.loading11 span:nth-child(4){
-webkit-animation-delay:0.39s;
}
.loading11 span:nth-child(5){
-webkit-animation-delay:0.52s;
}
</style>
<div class="loading11">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
第12種效果：
loading12
代碼如下：
<style>
.loading12{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto;
margin-top:100px;
position: relative;
border:5px solid lightgreen;
-webkit-animation: turn 2s linear infinite;
}
.loading12 span{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -15px;
margin-left: -15px;
-webkit-animation: changeBgColor12 2s linear infinite;
}
@-webkit-keyframes changeBgColor12{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes turn{
0%{
-webkit-transform: rotate(0deg);
border-color: lightgreen;
}
100%{
-webkit-transform: rotate(360deg);
border-color: lightblue;
}
}
</style>
<div class="loading12">
<span></span>
</div>
第13種效果：
loading13
代碼如下：
<style>
.loading13{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
text-align: center;
}
.loading13 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load13 1.04s ease infinite;
}
.loading13 span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load13{
0%{
opacity: 1;
-webkit-transform: scale(1.2);
}
100%{
opacity: .2;
-webkit-transform: scale(.2);
}
}
.loading13 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading13 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading13 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading13 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading13 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>
<div class="loading13">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
第四14種效果：
loading14
代碼如下：
<style>
.loading14{
width: 150px;
height: 8px;
border-radius: 4px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightblue;
overflow: hidden;
}
.loading14 span{
display:block;
width: 100%;
height: 100%;
border-radius: 3px;
background: lightgreen;
-webkit-animation: changePosition14 4s linear infinite;
}
@-webkit-keyframes changePosition14{
0%{
-webkit-transform: translate(-150px);
}
50%{
-webkit-transform: translate(0);
}
100%{
-webkit-transform: translate(150px);
}
}
</style>
<div class="loading14">
<span></span>
</div>
第15種效果：
loading15
代碼如下：
<style>
.loading15{
width: 200px;
height: 60px;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.loading15 span{
width: 50px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
top: 50%;
margin-top: -15px;
overflow: hidden;
-webkit-animation: changePosition15 2.08s linear infinite;
}
@-webkit-keyframes changePosition15{
0%,100%{
-webkit-transform: translate(70px);
}
20%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(0px);
}
30%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(0px);
}
35%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(5px);
background: lightblue;
}
70%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(160px);
}
80%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(160px);
}
85%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(155px);
background: lightgreen;
}
}
</style>
<div class="loading15">
<span></span>
</div>
第16種效果：
loading16
代碼如下：
<style>
.loading16{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loading16 span{
display: inline-block;
width: 30px;
height: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: lightgreen;
position: absolute;
-webkit-animation: load16 1.04s ease infinite;
}
@-webkit-keyframes load16{
0%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}
.loading16 span:nth-child(1){
left: 0;
top: 50%;
margin-top:-5px;
-webkit-animation-delay:0.13s;
}
.loading16 span:nth-child(2){
left: 10px;
top: 20px;
-webkit-transform: rotate(45deg);
-webkit-animation-delay:0.26s;
}
.loading16 span:nth-child(3){
left: 50%;
top: 10px;
margin-left: -15px;
-webkit-transform: rotate(90deg);
-webkit-animation-delay:0.39s;
}
.loading16 span:nth-child(4){
top: 20px;
right:10px;
-webkit-transform: rotate(135deg);
-webkit-animation-delay:0.52s;
}
.loading16 span:nth-child(5){
right: 0;
top: 50%;
margin-top:-5px;
-webkit-transform: rotate(180deg);
-webkit-animation-delay:0.65s;
}
.loading16 span:nth-child(6){
right: 10px;
bottom:20px;
-webkit-transform: rotate(225deg);
-webkit-animation-delay:0.78s;
}
.loading16 span:nth-child(7){
bottom: 10px;
left: 50%;
margin-left: -15px;
-webkit-transform: rotate(270deg);
-webkit-animation-delay:0.91s;
}
.loading16 span:nth-child(8){
bottom: 20px;
left: 10px;
-webkit-transform: rotate(315deg);
-webkit-animation-delay:1.04s;
}
</style>
<div class="loading16"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
第17種效果：
loading17
代碼如下：
<style>
.loading17 {
width: 100px;
height: 100px;
margin: 0 auto;
margin-top:100px;
position: relative;
}
.loading17 div{
width: 100%;
height: 100%;
position: absolute;
-webkit-animation: load17 2.08s linear infinite;
}
.loading17 div span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
@-webkit-keyframes load17{
0%{
-webkit-transform: rotate(0deg);
}
10%{
-webkit-transform: rotate(45deg);
}
50%{
opacity: 1;
-webkit-transform: rotate(160deg);
}
62%{
opacity: 0;
}
65%{
opacity: 0;
-webkit-transform: rotate(200deg);
}
90%{
-webkit-transform: rotate(340deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
.loading17 div:nth-child(1){
-webkit-animation-delay:0.2s;
}
.loading17 div:nth-child(2){
-webkit-animation-delay:0.4s;
}
.loading17 div:nth-child(3){
-webkit-animation-delay:0.6s;
}
.loading17 div:nth-child(4){
-webkit-animation-delay:0.8s;
}
</style>
<div class="loading17">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
第18種效果：
loading18
代碼如下：
<style>
.loading18{
width: 60px;
height: 60px;
margin: 0 auto;
margin-top:100px;
position: relative;
-webkit-animation: load18 3s linear infinite;
}
.loading18 div{
width: 100%;
height: 100%;
position: absolute;
}
.loading18 span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #99CC66;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
-webkit-animation: changeBgColor18 3s ease infinite;
}
@-webkit-keyframes load18{
0%{
-webkit-transform: rotate(0deg);
}
33.3%{
-webkit-transform: rotate(120deg);
}
66.6%{
-webkit-transform: rotate(240deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes changeBgColor18{
0%,100%{
background: #99CC66;
}
33.3%{
background: #FFFF66;
}
66.6%{
background: #FF6666;
}
}
.loading18 div:nth-child(2){
-webkit-transform: rotate(120deg);
}
.loading18 div:nth-child(3){
-webkit-transform: rotate(240deg);
}
.loading18 div:nth-child(2) span{
-webkit-animation-delay: 1s;
}
.loading18 div:nth-child(3) span{
-webkit-animation-delay: 2s;
}
</style>
<div class="loading18">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
PS：CSS樣式代碼其實很多重複，主要就是動畫不一樣，但爲了方便以後直接拿來用，就先不整理了。