简单实现Loading效果

主要代码（可以直接复制，粘贴到html就能用）：

<style>
    .over {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        opacity: 0.5;
        z-index: 1000;
    }

    .layout {
        display: none;
        position: absolute;
        top: 40%;
        left: 40%;
        width: 20%;
        height: 20%;
        z-index: 1001;
        text-align: center;
    }
</style>
<script>
    //显示Loading...
    function showLoading() {
        document.getElementById("over").style.display = "block";
        document.getElementById("layout").style.display = "block";
    }
    //关闭Loading...
    function hideLoading() {
        document.getElementById("over").style.display = "none";
        document.getElementById("layout").style.display = "none";
    }
</script>
<div id="over" class="over"></div>
<div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /></div>

启动Loading，用：showLoading();                                                                            

隐藏Loading，用：hideLoading();                                                                              

实际应用：

    //加载报表
    function GetDailyReport() {
        var startDate = $("#startDate").val();
        $("tbody").empty();
        $.getJSON("/controller/action",
            { "startDate": startDate },
            function (result) {
                showLoading();//显示Loading
                $.each(result, function (i, field) {
                    var html = "";                
                    html += "<tr>";
                    html += "<td>" + field.公司 + "</td>";  
                    html += "<td>" + field.总数量 + "</td>";
                    html += "<td>" + field.总金额 + "</td>";
                    html += "</tr>";
                    $("#tbody").append(html);
                });            
                hideLoading();//隐藏Loading
            });
    }

 大概样式：