Loading特效,网页加载中Jquery如何使用加载中的使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Loading特效,网页加载中Jquery如何使用加载中的使用相关的知识,希望对你有一定的参考价值。

参考技术A //请求加载提示的显示和隐藏
$('.loading').ajaxStart(function
()

$(this).show();
).ajaxStop(function
()

$(this).hide();
);
注意:以上代码在
jQuery1.8
及以后的版本不在有效,需要使用
jquery-migrate
向下兼容
才能运行。新版本中,必须绑定在
document
元素上。
$(document).ajaxStart(function
()

$('.loading').show();
).ajaxStop(function
()

$('.loading').hide();
);
//如果请求时间太长,可以设置超时
$.ajax(
timeout
:
500
)

loading(正在加载特效)

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
		<title></title>
		<script type="text/javascript">
			$(function() {

				/**
				 * Created by Administrator on 2015/3/20.
				 */

				//载入中
				document.onreadystatechange = subSomething;

				function subSomething() {
					if(document.readyState == "complete") {
						Mopload();
					}
				}

				function initevent() {
					jQuery.event.add();
				}
				//获取随机数
				function getRandom(n) {
					return Math.floor(Math.random() * n + 1)
				}

				function addfourstlye(obj, name, value) {
					var four_list = ["-webkit-", "-moz-", "-o-", ""];
					for(var i = 0; i < four_list.length; i++) {
						obj.css(four_list[i] + name, value);
					}
				}

				function Mopload() {
					var load_name_list = ["rotating-plane", "double-bounce", "wave", "wandering-cubes", "pulse", "chasing-dots", "three-bounce", "circle", "cube-grid", "run-ball", "fading-circle"];
					var default_load = "rotating-plane";
					var default_index = 0;
					$("[class^=mop-load]").each(function(index) {
						var _mop_html = $(this).html().trim();
						var _mop_class = $(this).attr("class");
						var _temp = _mop_class.split("mop-load-");
						if(_temp.length < 2) {
							return;
						}
						var arr = ‘<div class="mop-load-div">‘;
						if(_temp[1].trim() * 1 < load_name_list.length) {
							arr += ‘<div class="mop-css-‘ + _temp[1].trim() + ‘">‘
						} else if(_temp[1].trim() == "x") {
							arr += ‘<div class="mop-css-x">‘;
						} else {
							return;
						}
						if(_mop_html == "") {
							_mop_html = "Loading……"
						} else {
							$(this).html(_mop_html);
						}
						arr += ‘</div><div class="mop-load-text" >‘ + _mop_html + ‘</div></div>‘;
						$(this).html(arr);
						//addfourstlye($(this),"transition","height 2s linear 0s;");
						$(this).css("text-align", "center");
						//$(this).find(".mop-load-div").hide();
					})
					$("[class^=mop-css]").each(function(index) {
						var _mop_class = $(this).attr("class");
						var _temp = _mop_class.split("mop-css-");
						if(_temp == "mop-css") {
							$(this).addClass(default_load);
						}
						if(_temp[1].trim() == "x") {
							var rand = getRandom(load_name_list.length - 1);
							$(this).addClass(load_name_list[rand]);
						} else if(_temp[1] * 1 < load_name_list.length) {
							$(this).addClass(load_name_list[_temp[1]]);
						} else {
							return;
						}
					});
					$(".double-bounce").each(function(index) {
						var arr = ‘<div class="double-bounce1"></div><div class="double-bounce2"></div>‘;
						$(this).append(arr);
					});
					$(".wave").each(function(index) {
						var arr = ‘<div class = "rect1" ></div><div class = "rect2" ></div><div class = "rect3" ></div><div class = "rect4" ></div><div class = "rect5" ></div>‘;
						$(this).append(arr);
					});
					$(".wandering-cubes").each(function(index) {
						var arr = ‘<div class="cube1"></div><div class="cube2"></div>‘;
						$(this).append(arr);
					});
					$(".chasing-dots").each(function(index) {
						var arr = ‘<div class="dot1"></div><div class="dot2"></div>‘;
						$(this).append(arr);
					});
					$(".three-bounce").each(function(index) {
						var arr = ‘<div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>‘;
						$(this).append(arr);
					});
					$(".circle").each(function(index) {
						var arr = ‘<div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>‘;
						arr += ‘<div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>‘;
						arr += ‘<div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>‘
						$(this).append(arr);
					});
					$(".cube-grid").each(function(index) {
						var arr = ‘<div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div>‘;
						$(this).append(arr);
					});
					$(".run-ball").each(function(index) {
						var arr = ‘<span class="sk-inner-circle"></span>‘;
						$(this).append(arr);
					});
					$(".fading-circle").each(function(index) {
						var arr = ‘<div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div>‘;
						arr += ‘<div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div>‘;
						$(this).append(arr);
					});
				}
			})
		</script>
		<style>
			body {
				text-align: center;
			}
			
			label {
				color: red;
			}
			/***************************************************/
			
			.rotating-plane {
				min-width: 60px;
				min-height: 60px;
				width: 60px;
				height: 60px;
				background-color: #67CF22;
				-webkit-animation: rotateplane 1.2s infinite ease-in-out;
				-moz-animation: rotateplane 1.2s infinite ease-in-out;
				-o-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)
				}
			}
			
			@-moz-keyframes rotateplane {
				0% {
					-moz-transform: perspective( 120px)
				}
				50% {
					-moz-transform: perspective( 120px) rotateY( 180deg)
				}
				100% {
					-moz-transform: perspective( 120px) rotateY( 180deg) rotateX( 180deg)
				}
			}
			
			@-o-keyframes rotateplane {
				0% {
					-o-transform: perspective( 120px)
				}
				50% {
					-o-transform: perspective( 120px) rotateY( 180deg)
				}
				100% {
					-o-transform: perspective( 120px) rotateY( 180deg) rotateX( 180deg)
				}
			}
			
			@keyframes rotateplane {
				0% {
					transform: perspective( 120px) rotateX( 0deg) rotateY( 0deg);
				}
				50% {
					transform: perspective( 120px) rotateX( -180.1deg) rotateY( 0deg);
				}
				100% {
					transform: perspective( 120px) rotateX( -180deg) rotateY( -179.9deg);
				}
			}
			/*
双反弹圆效果
*/
			
			.double-bounce {
				min-width: 60px;
				min-height: 60px;
				position: relative;
			}
			
			.double-bounce1,
			.double-bounce2 {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #67CF22;
				opacity: 0.6;
				position: absolute;
				top: 0;
				left: 0;
				-webkit-animation: bounce 2.0s infinite ease-in-out;
				-moz-animation: bounce 2.0s infinite ease-in-out;
				-o-animation: bounce 2.0s infinite ease-in-out;
				animation: bounce 2.0s infinite ease-in-out;
			}
			
			.double-bounce2 {
				-webkit-animation-delay: -1.0s;
				-moz-animation-delay: -1.0s;
				-o-animation-delay: -1.0s;
				animation-delay: -1.0s;
			}
			
			@-webkit-keyframes bounce {
				0%,
				100% {
					-webkit-transform: scale(0.0)
				}
				50% {
					-webkit-transform: scale(1.0)
				}
			}
			
			@-moz-keyframes bounce {
				0%,
				100% {
					-moz-transform: scale(0.0)
				}
				50% {
					-moz-transform: scale(1.0)
				}
			}
			
			@-o-keyframes bounce {
				0%,
				100% {
					-o-transform: scale(0.0)
				}
				50% {
					-o-transform: scale(1.0)
				}
			}
			
			@keyframes bounce {
				0%,
				100% {
					transform: scale(0.0);
				}
				50% {
					transform: scale(1.0);
				}
			}
			/*
波纹效果
*/
			
			.wave {
				min-width: 60px;
				min-height: 60px;
				width: 60px;
				height: 60px;
			}
			
			.wave> div {
				background-color: #67CF22;
				min-height: 60px;
				height: 100%;
				width: 10%;
				margin-left: 10%;
				display: inline-block;
				-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
				-moz-animation: stretchdelay 1.2s infinite ease-in-out;
				-o-animation: stretchdelay 1.2s infinite ease-in-out;
				animation: stretchdelay 1.2s infinite ease-in-out;
			}
			
			.wave .rect2 {
				-webkit-animation-delay: -1.1s;
				-moz-animation-delay: -1.1s;
				-o-animation-delay: -1.1s;
				animation-delay: -1.1s;
			}
			
			.wave .rect3 {
				-webkit-animation-delay: -1.0s;
				-moz-animation-delay: -1.0s;
				-o-animation-delay: -1.0s;
				animation-delay: -1.0s;
			}
			
			.wave .rect4 {
				-webkit-animation-delay: -0.9s;
				-moz-animation-delay: -0.9s;
				-o-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			
			.wave .rect5 {
				-webkit-animation-delay: -0.8s;
				-moz-animation-delay: -0.8s;
				-o-animation-delay: -0.8s;
				animation-delay: -0.8s;
			}
			
			@-webkit-keyframes stretchdelay {
				0%,
				40%,
				100% {
					-webkit-transform: scaleY( 0.4)
				}
				20% {
					-webkit-transform: scaleY( 1.0)
				}
			}
			
			@-moz-keyframes stretchdelay {
				0%,
				40%,
				100% {
					-moz-transform: scaleY( 0.4)
				}
				20% {
					-moz-transform: scaleY( 1.0)
				}
			}
			
			@-o-keyframes stretchdelay {
				0%,
				40%,
				100% {
					-o-transform: scaleY( 0.4)
				}
				20% {
					-o-transform: scaleY( 1.0)
				}
			}
			
			@keyframes stretchdelay {
				0%,
				40%,
				100% {
					transform: scaleY( 0.4);
				}
				20% {
					transform: scaleY( 1.0);
				}
			}
			/*
旋转立方体效果
*/
			
			.wandering-cubes {
				min-width: 60px;
				min-height: 60px;
				position: relative;
			}
			
			.cube1,
			.cube2 {
				background-color: #67CF22;
				width: 50%;
				height: 50%;
				position: absolute;
				top: 0;
				left: 0;
				-webkit-animation: cubemove 1.8s infinite ease-in-out;
				-moz-animation: cubemove 1.8s infinite ease-in-out;
				-o-animation: cubemove 1.8s infinite ease-in-out;
				animation: cubemove 1.8s infinite ease-in-out;
			}
			
			.cube2 {
				-webkit-animation-delay: -0.9s;
				-moz-animation-delay: -0.9s;
				-o-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			
			@-webkit-keyframes cubemove {
				25% {
					-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
				}
				50% {
					-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
				}
				75% {
					-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
				}
				100% {
					-webkit-transform: rotate(-360deg)
				}
			}
			
			@-moz-keyframes cubemove {
				25% {
					-moz-transform: translateX(42px) rotate(-90deg) scale(0.5)
				}
				50% {
					-moz-transform: translateX(42px) translateY(42px) rotate(-180deg)
				}
				75% {
					-moz-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
				}
				100% {
					-moz-transform: rotate(-360deg)
				}
			}
			
			@-o-keyframes cubemove {
				25% {
					-o-transform: translateX(42px) rotate(-90deg) scale(0.5)
				}
				50% {
					-o-transform: translateX(42px) translateY(42px) rotate(-180deg)
				}
				75% {
					-o-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
				}
				100% {
					-o-transform: rotate(-360deg)
				}
			}
			
			@keyframes cubemove {
				25% {
					transform: translateX(42px) rotate(-90deg) scale(0.5);
				}
				50% {
					transform: translateX(42px) translateY(42px) rotate(-180deg);
				}
				75% {
					transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
				}
				100% {
					transform: rotate(-360deg);
				}
			}
			/*
脉冲效果
*/
			
			.pulse {
				min-width: 60px;
				min-height: 60px;
				background-color: #67CF22;
				border-radius: 100%;
				-webkit-animation: scaleout 1.0s infinite ease-in-out;
				-moz-animation: scaleout 1.0s infinite ease-in-out;
				-o-animation: scaleout 1.0s infinite ease-in-out;
				animation: scaleout 1.0s infinite ease-in-out;
			}
			
			@-webkit-keyframes scaleout {
				0% {
					-webkit-transform: scale(0.0)
				}
				100% {
					-webkit-transform: scale(1.0);
					opacity: 0;
				}
			}
			
			@-moz-keyframes scaleout {
				0% {
					-moz-transform: scale(0.0)
				}
				100% {
					-moz-transform: scale(1.0);
					opacity: 0;
				}
			}
			
			@-o-keyframes scaleout {
				0% {
					-o-transform: scale(0.0)
				}
				100% {
					-o-transform: scale(1.0);
					opacity: 0;
				}
			}
			
			@keyframes scaleout {
				0% {
					transform: scale(0.0);
				}
				100% {
					transform: scale(1.0);
					opacity: 0;
				}
			}
			/*
追逐点效果
*/
			
			.chasing-dots {
				min-width: 60px;
				min-height: 60px;
				position: relative;
				text-align: center;
				-webkit-animation: rotate 2.0s infinite linear;
				-moz-animation: rotate 2.0s infinite linear;
				-o-animation: rotate 2.0s infinite linear;
				animation: rotate 2.0s infinite linear;
			}
			
			.dot1,
			.dot2 {
				width: 50%;
				height: 50%;
				display: inline-block;
				position: absolute;
				top: 0;
				background-color: #67CF22;
				border-radius: 100%;
				-webkit-animation: bounce 2.0s infinite ease-in-out;
				-moz-animation: bounce 2.0s infinite ease-in-out;
				-o-animation: bounce 2.0s infinite ease-in-out;
				animation: bounce 2.0s infinite ease-in-out;
			}
			
			.dot2 {
				top: auto;
				bottom: 0px;
				-webkit-animation-delay: -1.0s;
				animation-delay: -1.0s;
			}
			
			@-webkit-keyframes rotate {
				100% {
					-webkit-transform: rotate(360deg)
				}
			}
			
			@-moz-keyframes rotate {
				100% {
					-moz-transform: rotate(360deg)
				}
			}
			
			@-o-keyframes rotate {
				100% {
					-o-transform: rotate(360deg)
				}
			}
			
			@keyframes rotate {
				100% {
					transform: rotate(360deg);
				}
			}
			
			@-webkit-keyframes bounce {
				0%,
				100% {
					-webkit-transform: scale(0.0)
				}
				50% {
					-webkit-transform: scale(1.0)
				}
			}
			
			@-moz-keyframes bounce {
				0%,
				100% {
					-moz-transform: scale(0.0)
				}
				50% {
					-moz-transform: scale(1.0)
				}
			}
			
			@-o-keyframes bounce {
				0%,
				100% {
					-o-transform: scale(0.0)
				}
				50% {
					-o-transform: scale(1.0)
				}
			}
			
			@keyframes bounce {
				0%,
				100% {
					transform: scale(0.0);
				}
				50% {
					transform: scale(1.0);
				}
			}
			/*
三反弹球
*/
			
			.three-bounce {
				min-width: 90px;
				min-height: 60px;
				text-align: center;
				display: -moz-box;
				-moz-box-pack: center;
				-moz-box-align: center;
				/* Safari、Opera 以及 Chrome */
				display: -webkit-box;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				-o-box-pack: center;
				-o-box-align: center;
			}
			
			.three-bounce> div {
				width: 30%;
				height: 30%;
				min-height: 30px;
				min-width: 30px;
				background-color: #67CF22;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
				-moz-animation: bouncedelay 1.4s infinite ease-in-out;
				-o-animation: bouncedelay 1.4s infinite ease-in-out;
				animation: bouncedelay 1.4s infinite ease-in-out;
				/* 防止动画第一帧开始闪烁*/
				-webkit-animation-fill-mode: both;
				-moz-animation-fill-mode: both;
				-o-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.three-bounce .bounce1 {
				-webkit-animation-delay: -0.32s;
				animation-delay: -0.32s;
			}
			
			.three-bounce .bounce2 {
				-webkit-animation-delay: -0.16s;
				animation-delay: -0.16s;
			}
			
			@-webkit-keyframes bouncedelay {
				0%,
				80%,
				100% {
					-webkit-transform: scale(0.0)
				}
				40% {
					-webkit-transform: scale(1.0)
				}
			}
			
			@-moz-keyframes bouncedelay {
				0%,
				80%,
				100% {
					-moz-transform: scale(0.0)
				}
				40% {
					-moz-transform: scale(1.0)
				}
			}
			
			@-o-keyframes bouncedelay {
				0%,
				80%,
				100% {
					-o-transform: scale(0.0)
				}
				40% {
					-o-transform: scale(1.0)
				}
			}
			
			@keyframes bouncedelay {
				0%,
				80%,
				100% {
					transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
				}
			}
			/*
缓存追逐球
*/
			
			.circle {
				min-width: 60px;
				min-height: 60px;
				position: relative;
			}
			
			.container1> div,
			.container2> div,
			.container3> div {
				width: 20%;
				height: 20%;
				background-color: #67CF22;
				border-radius: 100%;
				position: absolute;
				-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
				-moz-animation: bouncedelay 1.2s infinite ease-in-out;
				-o-animation: bouncedelay 1.2s infinite ease-in-out;
				animation: bouncedelay 1.2s infinite ease-in-out;
				-webkit-animation-fill-mode: both;
				-moz-animation-fill-mode: both;
				-o-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.circle .spinner-container {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			
			.container2 {
				-webkit-transform: rotateZ(45deg);
				-moz-transform: rotateZ(45deg);
				-o-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			
			.container3 {
				-webkit-transform: rotateZ(90deg);
				-moz-transform: rotateZ(90deg);
				-o-transform: rotateZ(90deg);
				transform: rotateZ(90deg);
			}
			
			.circle1 {
				top: 0;
				left: 0;
			}
			
			.circle2 {
				top: 0;
				right: 0;
			}
			
			.circle3 {
				right: 0;
				bottom: 0;
			}
			
			.circle4 {
				left: 0;
				bottom: 0;
			}
			
			.container2 .circle1 {
				-webkit-animation-delay: -1.1s;
				-moz-animation-delay: -1.1s;
				-o-animation-delay: -1.1s;
				animation-delay: -1.1s;
			}
			
			.container3 .circle1 {
				-webkit-animation-delay: -1.0s;
				-moz-animation-delay: -1.0s;
				-o-animation-delay: -1.0s;
				animation-delay: -1.0s;
			}
			
			.container1 .circle2 {
				-webkit-animation-delay: -0.9s;
				-moz-animation-delay: -0.9s;
				-o-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			
			.container2 .circle2 {
				-webkit-animation-delay: -0.8s;
				-moz-animation-delay: -0.8s;
				-o-animation-delay: -0.8s;
				animation-delay: -0.8s;
			}
			
			.container3 .circle2 {
				-webkit-animation-delay: -0.7s;
				-moz-animation-delay: -0.7s;
				-o-animation-delay: -0.7s;
				animation-delay: -0.7s;
			}
			
			.container1 .circle3 {
				-webkit-animation-delay: -0.6s;
				-moz-animation-delay: -0.6s;
				-o-animation-delay: -0.6s;
				animation-delay: -0.6s;
			}
			
			.container2 .circle3 {
				-webkit-animation-delay: -0.5s;
				-moz-animation-delay: -0.5s;
				-o-animation-delay: -0.5s;
				animation-delay: -0.5s;
			}
			
			.container3 .circle3 {
				-webkit-animation-delay: -0.4s;
				-moz-animation-delay: -0.4s;
				-o-animation-delay: -0.4s;
				animation-delay: -0.4s;
			}
			
			.container1 .circle4 {
				-webkit-animation-delay: -0.3s;
				-moz-animation-delay: -0.3s;
				-o-animation-delay: -0.3s;
				animation-delay: -0.3s;
			}
			
			.container2 .circle4 {
				-webkit-animation-delay: -0.2s;
				-moz-animation-delay: -0.2s;
				-o-animation-delay: -0.2s;
				animation-delay: -0.2s;
			}
			
			.container3 .circle4 {
				-webkit-animation-delay: -0.1s;
				-moz-animation-delay: -0.1s;
				-o-animation-delay: -0.1s;
				animation-delay: -0.1s;
			}
			/*
舞动的方块效果
*/
			/*
     * Spinner positions
     * 1 2 3
     * 4 5 6
     * 7 8 9
*/
			
			.cube-grid {
				min-width: 60px;
				min-height: 60px;
				width: 60px;
				height: 60px;
			}
			
			.cube-grid .sk-cube {
				width: 33%;
				height: 33%;
				min-width: 20px;
				min-height: 20px;
				background-color: #67CF22;
				float: left;
				-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
				-moz-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
				-o-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
				animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
			}
			
			.cube-grid .sk-cube:nth-child(1) {
				-webkit-animation-delay: 0.2s;
				-moz-animation-delay: 0.2s;
				-o-animation-delay: 0.2s;
				animation-delay: 0.2s;
			}
			
			.cube-grid .sk-cube:nth-child(2) {
				-webkit-animation-delay: 0.3s;
				-moz-animation-delay: 0.3s;
				-o-animation-delay: 0.3s;
				animation-delay: 0.3s;
			}
			
			.cube-grid .sk-cube:nth-child(3) {
				-webkit-animation-delay: 0.4s;
				-moz-animation-delay: 0.4s;
				-o-animation-delay: 0.4s;
				animation-delay: 0.4s;
			}
			
			.cube-grid .sk-cube:nth-child(4) {
				-webkit-animation-delay: 0.1s;
				-moz-animation-delay: 0.1s;
				-o-animation-delay: 0.1s;
				animation-delay: 0.1s;
			}
			
			.cube-grid .sk-cube:nth-child(5) {
				-webkit-animation-delay: 0.2s;
				-moz-animation-delay: 0.2s;
				-o-animation-delay: 0.2s;
				animation-delay: 0.2s;
			}
			
			.cube-grid .sk-cube:nth-child(6) {
				-webkit-animation-delay: 0.3s;
				-moz-animation-delay: 0.3s;
				-o-animation-delay: 0.3s;
				animation-delay: 0.3s;
			}
			
			.cube-grid .sk-cube:nth-child(7) {
				-webkit-animation-delay: 0s;
				-moz-animation-delay: 0s;
				-o-animation-delay: 0s;
				animation-delay: 0s;
			}
			
			.cube-grid .sk-cube:nth-child(8) {
				-webkit-animation-delay: 0.1s;
				-moz-animation-delay: 0.1s;
				-o-animation-delay: 0.1s;
				animation-delay: 0.1s;
			}
			
			.cube-grid .sk-cube:nth-child(9) {
				-webkit-animation-delay: 0.2s;
				-moz-animation-delay: 0.2s;
				-o-animation-delay: 0.2s;
				animation-delay: 0.2s;
			}
			
			@-webkit-keyframes sk-cubeGridScaleDelay {
				0%,
				70%,
				100% {
					-webkit-transform: scale3D(1, 1, 1);
				}
				35% {
					-webkit-transform: scale3D(0, 0, 1);
				}
			}
			
			@-moz-keyframes sk-cubeGridScaleDelay {
				0%,
				70%,
				100% {
					moz-transform: scale3D(1, 1, 1);
				}
				35% {
					-moz-transform: scale3D(0, 0, 1);
				}
			}
			
			@-o-keyframes sk-cubeGridScaleDelay {
				0%,
				70%,
				100% {
					-o-transform: scale3D(1, 1, 1);
				}
				35% {
					-o-transform: scale3D(0, 0, 1);
				}
			}
			
			@keyframes sk-cubeGridScaleDelay {
				0%,
				70%,
				100% {
					transform: scale3D(1, 1, 1);
				}
				35% {
					transform: scale3D(0, 0, 1);
				}
			}
			/*
运动的球效果
*/
			
			.run-ball {
				background-color: #67CF22;
				width: 60px;
				height: 60px;
				border-radius: 100%;
				position: relative;
				-webkit-animation: sk-innerCircle 1s linear infinite;
				-moz-animation: sk-innerCircle 1s linear infinite;
				-o-animation: sk-innerCircle 1s linear infinite;
				animation: sk-innerCircle 1s linear infinite;
			}
			
			.run-ball .sk-inner-circle {
				display: block;
				background-color: #fff;
				width: 25%;
				height: 25%;
				position: absolute;
				border-radius: 100%;
				top: 5px;
				left: 5px;
			}
			
			@-webkit-keyframes sk-innerCircle {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			
			@-moz-keyframes sk-innerCircle {
				0% {
					-moz-transform: rotate(0deg);
				}
				100% {
					-moz-transform: rotate(360deg);
				}
			}
			
			@-o-keyframes sk-innerCircle {
				0% {
					-o-transform: rotate(0deg);
				}
				100% {
					-o-transform: rotate(360deg);
				}
			}
			
			@keyframes sk-innerCircle {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			/*
虚落球效果
*/
			
			.fading-circle {
				min-width: 60px;
				min-height: 60px;
				position: relative;
			}
			
			.sk-circle {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.sk-circle:before {
				content: ‘‘;
				display: block;
				margin: 0 auto;
				width: 18%;
				height: 18%;
				background-color: #67CF22;
				border-radius: 100%;
				-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
				-moz-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
				-o-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
				animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
				/* Prevent first frame from flickering when animation starts */
				-webkit-animation-fill-mode: both;
				-moz-animation-fill-mode: both;
				-o-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.sk-circle2 {
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				-o-transform: rotate(30deg);
				transform: rotate(30deg);
			}
			
			.sk-circle3 {
				-webkit-transform: rotate(60deg);
				-moz-transform: rotate(60deg);
				-o-transform: rotate(60deg);
				transform: rotate(60deg);
			}
			
			.sk-circle4 {
				-webkit-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				transform: rotate(90deg);
			}
			
			.sk-circle5 {
				-webkit-transform: rotate(120deg);
				-moz-transform: rotate(120deg);
				-o-transform: rotate(120deg);
				transform: rotate(120deg);
			}
			
			.sk-circle6 {
				-webkit-transform: rotate(150deg);
				-moz-transform: rotate(150deg);
				-o-transform: rotate(150deg);
				transform: rotate(150deg);
			}
			
			.sk-circle7 {
				-webkit-transform: rotate(180deg);
				-moz-transform: rotate(180deg);
				-o-transform: rotate(180deg);
				transform: rotate(180deg);
			}
			
			.sk-circle8 {
				-webkit-transform: rotate(210deg);
				-moz-transform: rotate(210deg);
				-o-transform: rotate(210deg);
				transform: rotate(210deg);
			}
			
			.sk-circle9 {
				-webkit-transform: rotate(240deg);
				-moz-transform: rotate(240deg);
				-o-transform: rotate(240deg);
				transform: rotate(240deg);
			}
			
			.sk-circle10 {
				-webkit-transform: rotate(270deg);
				-moz-transform: rotate(270deg);
				-o-transform: rotate(270deg);
				transform: rotate(270deg);
			}
			
			.sk-circle11 {
				-webkit-transform: rotate(300deg);
				-moz-transform: rotate(300deg);
				-o-transform: rotate(300deg);
				transform: rotate(300deg);
			}
			
			.sk-circle12 {
				-webkit-transform: rotate(330deg);
				-moz-transform: rotate(330deg);
				-o-transform: rotate(330deg);
				transform: rotate(330deg);
			}
			
			.sk-circle2:before {
				-webkit-animation-delay: -1.1s;
				-moz-animation-delay: -1.1s;
				-o-animation-delay: -1.1s;
				animation-delay: -1.1s;
			}
			
			.sk-circle3:before {
				-webkit-animation-delay: -1s;
				-moz-animation-delay: -1s;
				-o-animation-delay: -1s;
				animation-delay: -1s;
			}
			
			.sk-circle4:before {
				-webkit-animation-delay: -0.9s;
				-moz-animation-delay: -0.9s;
				-o-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			
			.sk-circle5:before {
				-webkit-animation-delay: -0.8s;
				-moz-animation-delay: -0.8s;
				-o-animation-delay: -0.8s;
				animation-delay: -0.8s;
			}
			
			.sk-circle6:before {
				-webkit-animation-delay: -0.7s;
				-moz-animation-delay: -0.7s;
				-o-animation-delay: -0.7s;
				animation-delay: -0.7s;
			}
			
			.sk-circle7:before {
				-webkit-animation-delay: -0.6s;
				-moz-animation-delay: -0.6s;
				-o-animation-delay: -0.6s;
				animation-delay: -0.6s;
			}
			
			.sk-circle8:before {
				-webkit-animation-delay: -0.5s;
				-moz-animation-delay: -0.5s;
				-o-animation-delay: -0.5s;
				animation-delay: -0.5s;
			}
			
			.sk-circle9:before {
				-webkit-animation-delay: -0.4s;
				-moz-animation-delay: -0.4s;
				-o-animation-delay: -0.4s;
				animation-delay: -0.4s;
			}
			
			.sk-circle10:before {
				-webkit-animation-delay: -0.3s;
				-moz-animation-delay: -0.3s;
				-o-animation-delay: -0.3s;
				animation-delay: -0.3s;
			}
			
			.sk-circle11:before {
				-webkit-animation-delay: -0.2s;
				-moz-animation-delay: -0.2s;
				-o-animation-delay: -0.2s;
				animation-delay: -0.2s;
			}
			
			.sk-circle12:before {
				-webkit-animation-delay: -0.1s;
				-moz-animation-delay: -0.1s;
				-o-animation-delay: -0.1s;
				animation-delay: -0.1s;
			}
			
			@-webkit-keyframes sk-circleFadeDelay {
				0%,
				39%,
				100% {
					opacity: 0;
				}
				40% {
					opacity: 1;
				}
			}
			
			@-moz-keyframes sk-circleFadeDelay {
				0%,
				39%,
				100% {
					opacity: 0;
				}
				40% {
					opacity: 1;
				}
			}
			
			@-o-keyframes sk-circleFadeDelay {
				0%,
				39%,
				100% {
					opacity: 0;
				}
				40% {
					opacity: 1;
				}
			}
			
			@keyframes sk-circleFadeDelay {
				0%,
				39%,
				100% {
					opacity: 0;
				}
				40% {
					opacity: 1;
				}
			}
			
			section[class^=mop-load] {
				height: 100px;
				-webkit-transition: height 1s linear 0s;
				-moz-transition: height 1s linear 0s;
				-o-transition: height 1s linear 0s;
				transition: height 1s linear 0s;
				overflow: hidden;
			}
			
			.flip {
				height: 0px;
			}
			
			.mop-load-div {
				box-pack: center;
				box-align: center;
				/* Firefox */
				height: 100px;
				display: -moz-box;
				-moz-box-pack: center;
				-moz-box-align: center;
				/* Safari、Opera 以及 Chrome */
				display: -webkit-box;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				-o-box-pack: center;
				-o-box-align: center;
			}
			
			.loading {
				background-position: 0 100%;
				-webkit-transform: rotate(0deg) translateZ(0);
				-webkit-transition-duration: 0ms;
				-webkit-animation-name: loading;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
			}
			
			@-webkit-keyframes loading {
				from {
					-webkit-transform: rotate(0deg) translateZ(0);
				}
				to {
					-webkit-transform: rotate(360deg) translateZ(0);
				}
			}
			
			.mop-load-text {
				font-weight: bold;
				margin-left: 1.2em;
				font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
			}
		</style>

	</head>

	<body>
		<label>样式1</label>
		<div class="mop-load-0"></div>
		<label>样式2</label>
		<div class="mop-load-1"></div>
		<label>样式3</label>
		<div class="mop-load-2"></div>
		<label>样式4</label>
		<div class="mop-load-3"></div>
		<label>样式5</label>
		<div class="mop-load-4"></div>
		<label>样式6</label>
		<div class="mop-load-5"></div>
		<label>样式7</label>
		<div class="mop-load-6"></div>
		<label>样式8</label>
		<div class="mop-load-7"></div>
		<label>样式9</label>
		<div class="mop-load-8"></div>
		<label>样式10</label>
		<div class="mop-load-9"></div>
		<label>样式11</label>
		<div class="mop-load-10"></div>

		<label>随机样式</label>
		<div class="mop-load-x"></div>
	</body>

</html>

  

以上是关于Loading特效,网页加载中Jquery如何使用加载中的使用的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 页面加载等待特效,当数据加载完成效果消失的代码?

js怎么异步加载loading

使用jQuery快速高效制作网页交互特效

使用jQuery快速高效制作网页交互特效

纯css3 加载loading动画特效

HTML5 都有哪些让你惊艳的 demo?