無論什么請求，總有那么一段等待請求響應(yīng)de時間。如果等待loading使用.gif的圖片來代替，那么這里就又會多一次http請求。 為了提高性能。我們可以使用css3來達到效果。
原理:
通過2D轉(zhuǎn)變圖標(biāo)的狀態(tài)，然后對其從0~100%的過渡時間段內(nèi)施加一段轉(zhuǎn)變效果，然后讓圖標(biāo)重復(fù)此前的動作，即完成了。
所用相關(guān)的技術(shù)：
使用到css3的transform(轉(zhuǎn)變),transition(過渡)，animation(動畫)。此處我寫了4種。
代碼：
第一種效果如下：
.html代碼
<div class="box">
<div class="loading1">
<i></i>
</div>
</div>
.css代碼
.box { width: 100%; }/* display,align-items,justify-content 這三個屬性是為了將 i 標(biāo)簽中的內(nèi)容放置在 div 的中部。 首先利用 display 屬性將div 設(shè)置成彈性盒子元素，然后利用 align-items 設(shè)置元素在縱軸上居中，justify-content 設(shè)置元素在橫軸上居中。*/
.loading1 {
width: 30%;
height: 250px;
border: 1px solid #11CD6E;
box-sizing: border-box;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
.loading1 i {
width: 35px;
height: 35px;
position: relative;
display: block;
border-radius: 50%;
background: linear-gradient(transparent 0%, transparent 70%, #333333 70%, #333333 100%); /*設(shè)置0~70%為透明，70%~100%為灰色 */
-webkit-animation: loading1 1s linear 0s infinite;
-moz-animation: loading1-moz 1s linear 0s infinite;
}
@-webkit-keyframes loading1 {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
@-moz-keyframes loading1-moz{
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
第二種效果如下：
.html代碼
<div class="box">
<div class="loading2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
.css代碼
.box { width: 100%; }/* display,align-items,justify-content 這三個屬性是為了將 i 標(biāo)簽中的內(nèi)容放置在 div 的中部。 首先利用 display 屬性將div 設(shè)置成彈性盒子元素，然后利用 align-items 設(shè)置元素在縱軸上居中，justify-content 設(shè)置元素在橫軸上居中。*/
.loading2 {
width: 30%;
height: 250px;
border: 1px solid #11CD6E;
box-sizing: border-box;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.loading2 i {
width: 6px;
height: 32px;
margin-right: 6px;
border-radius: 4px;
background-color: #333333;
}
.loading2 i:nth-child(1){ -webkit-animation:loading2 1s linear 0s infinite; }
.loading2 i:nth-child(2){ -webkit-animation:loading2 1s linear 0.2s infinite; }
.loading2 i:nth-child(3){ -webkit-animation:loading2 1s linear 0.4s infinite; }
.loading2 i:nth-child(4){ -webkit-animation:loading2 1s linear 0.6s infinite; }
.loading2 i:nth-child(5){ -webkit-animation:loading2 1s linear 0.8s infinite; }
@-webkit-keyframes loading2 {
0% { transform : scale(1,1); }
50% { transform: scale(1,0.5); }
100% { transform : scale(1,1); }
}
第三種效果如下：
.html代碼
<div class="box">
<div class="loader">
<div class="loading3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
.css代碼
/* display,align-items,justify-content 這三個屬性是為了將 i 標(biāo)簽中的內(nèi)容放置在 div 的中部。 首先利用 display 屬性將div 設(shè)置成彈性盒子元素，然后利用 align-items 設(shè)置元素在縱軸上居中，justify-content 設(shè)置元素在橫軸上居中。*/
.loader {
width: 30%;
height: 250px;
margin: 10px auto;
border: 1px solid #11CD6E;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
/* 父元素在8個圓點中間，設(shè)置為相對定位。*/
.loading3 { position: relative; }
.loading3 i {
display: block;
width: 10px;
height: 10px;
background-color: #333333;
border-radius: 50%;
position: absolute;
}
.loading3 i:nth-child(1) {
top: 25px;
left: 0px;
-webkit-animation: loading3 1s linear 0.84s infinite;
}
.loading3 i:nth-child(2) {
top: 17px;
left: 17px;
-webkit-animation: loading3 1s linear 0.72s infinite;
}
.loading3 i:nth-child(3) {
top: 0px;
left:25px;
-webkit-animation: loading3 1s linear 0.6s infinite;
}
.loading3 i:nth-child(4) {
top:-17px;
left: 17px;
-webkit-animation: loading3 1s linear 0.48s infinite;
}
.loading3 i:nth-child(5) {
top: -25px;
left: 0px;
-webkit-animation: loading3 1s linear 0.36s infinite;
}
.loading3 i:nth-child(6) {
top: -17px;
left: -17px;
-webkit-animation: loading3 1s linear 0.24s infinite;
}
.loading3 i:nth-child(7) {
top: 0px;
left: -25px;
-webkit-animation: loading3 1s linear 0.12s infinite;
}
.loading3 i:nth-child(8) {
top: 17px;
left: -17px;
-webkit-animation: loading3 1s linear 0s infinite;
}
@-webkit-keyframes loading3{
0% {
transform: scale(0,0);
opacity: 0.3;
}
100% {
transform: scale(1,1);
opacity: 1;
}
}
第四種效果如下：
.html代碼
<div class="box">
<div class="loading4">
<div class="loader4"> </div>
</div>
</div>
.css代碼
.box { width: 100%; }/* display,align-items,justify-content 這三個屬性是為了將 i 標(biāo)簽中的內(nèi)容放置在 div 的中部。 首先利用 display 屬性將div 設(shè)置成彈性盒子元素，然后利用 align-items 設(shè)置元素在縱軸上居中，justify-content 設(shè)置元素在橫軸上居中。*/
.loading4 {
width: 30%;
height: 250px;
border: 1px solid #11CD6E;
box-sizing: border-box;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.loader4 {
width:100px;
height: 100px;
border-radius: 50%;
border:1px solid #BBBABA;
position: relative;
border-width: 4px;
}
.loader4:before {
width: 35px;
height: 4px;
top: 50%;
left: 50%;
position: absolute;
content: "";
border-radius: 4px;
background-color: #BBBABA;
transform-origin: 2px 2px 0;
-webkit-animation: before 10s linear 0s infinite;
}
.loader4:after {
width: 45px;
height: 5px;
top: 50%;
left: 50%;
position: absolute;
content: "";
background-color: #BBBABA;
transform-origin: 2px 2px 0;
-webkit-animation: after 2s linear 0s infinite;
border-radius: 4px;
}
@-webkit-keyframes before {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes after {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
