等待效果

js界面代码

  <script type="text/javascript">
        //获取浏览器页面可见高度和宽度
        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;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代码

<style>
        .spinner {
             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);
            }
        }
    </style>

需要引用

    <link rel="stylesheet" href="http://lee.dkfirst.cn/lee_loading.css">
    <script src="http://lee.dkfirst.cn/lee_loading.js"></script>    
    <script src="/Js/jquery.js"></script>

然后就可以了。