由于最近在写一个web项目，由于前端框架开发，和后台查数据的语法不成熟导致页面加载速度过慢，遂想到用loading效果来过渡:
粗略的查阅了下网上的实现方法，在此总结下方法实现
先上效果图：
代码：
<link rel="stylesheet" href="http://lee.dkfirst.cn/lee_loading.css"> <script src="http://lee.dkfirst.cn/lee_loading.js"></script>
上面两段代码放在<head></head>中间即可
思路详解：
JS部分：在页面加载前就先加载一个div罩，等待页面全部加载完成后，关闭此div罩
//获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth;//计算loading框距离顶部和左部的距离（loading框小部件的宽度为90px，高度为90px） var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0, _LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;//在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFFFFF;opacity:1.0; filter:alpha(opacity=80);z-index:10000;"> <div class="spinner" style="position: top: 60px; margin:' + _LoadingTop + 'px auto ;"></div></div>';//呈现loading效果 document.write(_LoadingHtml);//监听加载状态改变 document.onreadystatechange = completeLoading;//加载状态为complete时移除loading效果 function completeLoading() { if (document.readyState == "complete") { //此引用了Jquery，页面没有导jq包的，需要自行加入 $("#loadingDiv").fadeOut(1500); }}CSS部分：CSS3构造一个无限循环动作的loading框.spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }} @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }}
