五种比较常用的等待框

css部分：
<style type="text/css">
.main-site{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
}
#mainContent{
position: absolute;
width: 120px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -60px;
}
#mainContent>p{
margin-left: 6px;
color: #EF7F00;
font-size: 1.4rem;
font-weight: bold;
}
.loader {
       width:50px;
       height:50px;
       border-radius:50%;
       margin:3em;
       display:inline-block;
       position:relative;
       vertical-align:middle;
   }
   .loader,.loader:before,.loader:after {
       animation:1s infinite ease-in-out;
   }
   .loader:before,.loader:after {
       width:100%;
       height:100%;
       border-radius:50%;
       position:absolute;
       top:0;
       left:0;
   }
   .loader-black {
       background-color: #EF7F00;
   }
   /* Loader 5 */

   .loader-5 {
       animation:loader5 1s infinite linear;
   }
   @keyframes loader5 {
       0% {
           transform:rotate(0deg);
           border-radius:50%;
       }
       50% {
           transform:rotate(90deg);
           border-radius:0%;
       }
       100% {
           transform:rotate(180deg);
           border-radius:50%;
       }
</style>








html部分：
<!--等待框-->
<div class="main-site">
   <div class="main-content space-top wrapper" role="main" id="mainContent">
       <div class="loader loader-black loader-5"></div><p>正在拼命加载中...</p>
   </div>

</div>

有问题的话可以来本人个人博客留言：http://www.funtechstudy.com/