如何使用jQuery创建“请稍候，正在加载…”动画？

你可以用各种不同的方法来做。它可能是一种微妙的状态，比如页面上的一个小状态显示“正在加载…”，也可能是整个元素在加载新数据时使页面变灰。下面我将介绍如何实现这两种方法

设置

让我们先从一个漂亮的“加载”动画开始http://ajaxload.info
我会用

让我们创建一个元素，在发出ajax请求时可以随时显示/隐藏该元素：

&lt；div class=“modal”&gt&lt；！--放在页面底部--&gt&lt/部门&gt；

CSS

接下来让我们给它一些天赋：

/*首先设置display:none使其隐藏。
然后我们将其相对于视口窗口进行定位
位置：固定。宽度、高度、顶部和左侧扬声器
为了他们自己。背景设置为80%白色
我们以动画为中心，没有重复*/
.莫代尔{
显示：无；
位置：固定；
z指数：1000；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景：rgba（255、255、255、.8）
url（'http://i.stack.imgur.com/FhHRx.gif') 
50% 50% 
不重复；
}
/*当身体达到负荷等级时，我们转向
滚动条关闭并溢出：隐藏*/
车身、负载、模态{
溢出：隐藏；
}
/*任何时候，只要身体有负荷等级，我们的
模态元素将可见*/
车身、负载、模态{
显示：块；
}

最后是jQuery

好的，转到jQuery。下一部分其实很简单：

$body=$（“body”）；
$（文件）({
ajaxStart:function（）{$body.addClass（“加载”）；}，
ajaxStop:function（）{$body.removeClass（“加载”）；}
});

就这样！只要触发ajaxStart或ajaxStop事件，我们就会将一些事件附加到body元素。当ajax事件开始时，我们将“加载”类添加到主体中。当事件完成时，我们从主体中移除“加载”类

在行动中看到它：http://jsfiddle.net/VpDUG/4952/