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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wangyanxin928/article/details/78591023

首先需要引入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内容及方法 start
function 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