页面加载loading适合于IE10以上及移动端

首先需要引入jquery，把body设置为隐藏；

css

/*loading 加载动画 start*/#loading{  background-color: #fff;  height: 100%;  width: 100%;  position: fixed;  z-index: 1;  margin-top: 0px;  top: 0px;  }#loading-center{  width: 100%;  height: 100%;  position: relative;  }#loading-center-absolute {  position: absolute;  left: 50%;  top: 50%;  height: 20px;  width: 200px;  margin-top: -10px;  margin-left: -50px;  }#loadingTitle{position: absolute;  color: #2fcae5;  top: 30px;  font-size: 24px;  text-align: center;  margin: auto;}.object{  width: 20px;  height: 20px;  background-color: #2fcae5;  -moz-border-radius: 50% 50% 50% 50%;  -webkit-border-radius: 50% 50% 50% 50%;  border-radius: 50% 50% 50% 50%;  margin-right: 20px;  margin-bottom: 20px;  position: absolute;  }#object_one{  -webkit-animation: object 2s linear infinite;  animation: object 2s linear infinite;  }#object_two{  -webkit-animation: object 2s linear infinite -.4s;  animation: object 2s linear infinite -.4s;  }#object_three{  -webkit-animation: object 2s linear infinite -.8s;  animation: object 2s linear infinite -.8s;  }#object_four{  -webkit-animation: object 2s linear infinite -1.2s;  animation: object 2s linear infinite -1.2s;  }#object_five{  -webkit-animation: object 2s linear infinite -1.6s;  animation: object 2s linear infinite -1.6s;  }@-webkit-keyframes object{ 0% { left: 100px; top:0} 80% { left: 0; top:0;} 90% { width: 40px; height: 15px; } 95% { left: 100px; top: -20px; width: 20px; height: 20px;} 100% { left: 100px; top:0; }        }@keyframes object{ 0% { left: 100px; top:0} 80% { left: 0; top:0;} 85% { left: 0; top: -20px; width: 20px; height: 20px;} 90% { width: 40px; height: 15px; } 95% { left: 100px; top: -20px; width: 20px; height: 20px;} 100% { left: 100px; top:0; }}/*loading加载动画 end*/

jquery方法

// 初始化loading内容及方法 startfunction loading(e) {    var loadingStr="

<div id='loading'>

<div id='loading-center'>

<div id='loading-center-absolute'>

<div id='loadingTitle'>拼命加载中...</div>

<div class='object' id='object_one'></div>

<div class='object' id='object_two' style='left:20px;'></div>

<div class='object' id='object_three' style='left:40px;'></div>

<div class='object' id='object_four' style='left:60px;'></div>

<div class='object' id='object_five' style='left:80px;'></div>

</div>

</div>

</div>"

    $("body").append(loadingStr);    $("#loading").delay(1200).fadeOut(500);    $("body").css("display","block");}// 初始化loading内容及方法 end