自定义查询数据加载缓冲样式

之前由于数据加载有点慢，公司需要在已有的查询功能上做一个自定义的加载缓冲效果

css:

/*查询数据加载缓冲样式*/
.ajax_loading { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; background-color: transparent; }
.ajax_loading_inner { cursor: wait; text-align: center; background-color: rgba(0,0,0,0.5); color: #fff; position: fixed; top: 50%; left: 50%; margin-left: -70px; margin-top: -48px; width: 140px; border-radius: 6px !important; font-size: 14px; padding: 58px 0 10px 0; }

/*查询数据加载缓冲时，原有数据样式*/
.changeGray{
width:100%;
height:100%;
color: #fff; 
position: fixed;
top: 10%; 
left: 10%; 
bottom:10%;
right:10%;
border-radius: 6px !important; 
opacity:0.5;
background-color: #efefef;
}

html:

 <!--查询数据加载缓冲div-->     <div id="ajaxloading" class="ajax_loading  hide">     <div class="ajax_loading_inner" style='background:#666;'>     <!-- 加载缓冲的小图片，基本都是圈圈或者菊花等具有缓冲效果的图片 -->     <img style='width:20px;height:20px; position: absolute;top: 15px;left: 50%;margin-left: -16px;' src="${ctx}/static/jquery-easyui/themes/gray/images/loading.gif"/>数据加载中...</div>          </div>        <!--查询数据加载缓冲时，覆盖原有数据的div-->     <div id="KeepOut">     </div>

js:

ajaxloadbefore:function(){//加载前加入显示缓冲效果
			$("#ajaxloading").removeClass("hide");
			$("#KeepOut").addClass("changeGray");
		}

jaxloadend:function(){//加载结束消除显示缓冲效果
			$("#ajaxloading").addClass("hide");
			$(".changeGray").removeClass("changeGray");
		}

这样一个简单的查询数据加载缓冲效果就做好了

页面展示：

加缓冲样式之前：

加缓冲样式之后：