前言：
有时我们在页面请求比较大数据，界面如果卡着不动，总是给人感觉是不是死机了，对于没有耐心的用户更是拿着鼠标狂点，最后电脑真的死机了。对于这种情况loading的加载显示就尤为重要
（简书.YZJGOOD原创文章，转载请注明出处）
正文：
好的 废话不多说，接下来我们就来实现一个简单loading
（简书.YZJGOOD原创文章，转载请注明出处）
首先我们先整个元素到界面上：
<div id="shclKeyframes" style="display: none;"></div>
定义一个样式：
#shclKeyframes {width:100px; height:100px; margin:10px auto;}
在js中定义显示与隐藏loading元素：
$(".loginer").click(function(){
var ajaxbg = $("#shclKeyframes");
ajaxbg.show(); //显示
var emailer = $("#emailer").val();
var yzkey = $("#yzkey").val();
$.post('./php/dbselect.php','emailer='+emailer+'&yzkey='+yzkey, function (response) {
console.log(response);
if (response.indexOf('Y')!=-1) {
ajaxbg.hide(); //隐藏
}else{
ajaxbg.hide(); //隐藏
alert("输入错误，请重试！");
}
});
});
为了让loading更加炫酷我们可以引用 “shCircleLoader”确实很香，总有一款适合你,hh：
$('#shclKeyframes').shCircleLoader({keyframes:"0%{background:black}40%{background:transparent}60%{background:transparent}100%{background:black}"});
var i = 0;
setInterval(function() {
$('#shclProgress').shCircleLoader('progress', i + '%');
if (++i > 100) i = 0;
}, 100);
好的，这次的分享就到这里，谢谢！
（简书.YZJGOOD原创文章，转载请注明出处）
