首先需要引入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