Jq制作的很简单的加载动画效果，有2个效果。一个是圆形动画，一个是X轴的动画效果。先上图，然后贴上代码以及在线演示地址。

CSS：

#MainDiv {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	margin-top: 100px;
}
.item, .item2 {
	cursor: pointer;
	width: 10px;
	height: 10px;
	position: absolute;
	background-color: #ccc;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.item2 {
	background-color: #808080;
}
.itemCenter {
	background-image: url(cirCenter.png);
}
.show {
	font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
	margin-left: 20px;
	cursor: pointer;
	color: #333;
}
.showDefault {
	color: #ff4400;
}
#LoadingDiv {
	width: 300px;
	height: 20px;
	margin: 0 auto;
	margin-top: 0px;
}
.loadingItem {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: #808080;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

Js:

var LoadingHandler={
			Init:function(){	
				LoadingHandler.Show();
			},
			Show:function(){
				$(".loadingItem").css("margin-left","300px").css("opacity","0");
				for(var i=0;i<$(".loadingItem").length;i  ){
					if(i==$(".loadingItem").length-1){
					$($(".loadingItem")[i]).animate({marginLeft:i*10 10,opacity:1},(i 2)*200,function(){
						LoadingHandler.Hide();
					});
					}else{
					$($(".loadingItem")[i]).animate({marginLeft:(i)*10 10,opacity:1},(i 2)*200);
					}
				}
			},
			Hide:function(){
				for(var i=0;i<$(".loadingItem").length;i  ){
						if(i==$(".loadingItem").length-1){
					$($(".loadingItem")[i]).animate({marginLeft:"-300px",opacity:0},(i 2)*200,function(){LoadingHandler.Show();});
						}else{
							$($(".loadingItem")[i]).animate({marginLeft:"-300px",opacity:0},(i 2)*100);
						}
				}
			}
		}
		//菜单创建
		var CirMenuHandler = {
			radiusLength: 20,
			//半径
			radiusPointX: 0,
			//X坐标
			radiusPointY: 0,
			//Y坐标
			radiusParent: null,
			//父级容器
			radiusShowTag: 0,
			//效果模式
			Init: function() {
				CirMenuHandler.radiusParent = $("#MainDiv");
				CirMenuHandler.radiusPointY = CirMenuHandler.radiusPointX = CirMenuHandler.radiusLength   24;
				CirMenuHandler.RadiusShow();
			},
			//创建并显示菜单
			RadiusShow: function() {
				var itemCount = 12;
				var itemRadian = Number(360 / itemCount);

				for (var i = 0; i < itemCount; i  ) {
					var raius = itemRadian * i;
					var x = Math.sin(raius * Math.PI / 180) * CirMenuHandler.radiusLength   CirMenuHandler.radiusPointX;
					var y = CirMenuHandler.radiusPointY - Math.cos(raius * Math.PI / 180) * CirMenuHandler.radiusLength;
					var item1 = $("");
					item1.css("margin-left", x   "px").css("margin-top", y   "px");
					CirMenuHandler.radiusParent.append(item1);

				}

				for (var i = 0; i < itemCount; i  ) {
					var raius = itemRadian * i;
					var x = Math.sin(raius * Math.PI / 180) * CirMenuHandler.radiusLength   CirMenuHandler.radiusPointX;
					var y = CirMenuHandler.radiusPointY - Math.cos(raius * Math.PI / 180) * CirMenuHandler.radiusLength;
					var item2 = $("");
					item2.css("margin-left", CirMenuHandler.radiusPointX   "px").css("margin-top", CirMenuHandler.radiusPointY   "px");
					CirMenuHandler.radiusParent.append(item2);
				}
				if (CirMenuHandler.radiusShowTag == 0) {
					CirMenuHandler.ShowOne();
					var mTimer = setInterval(function() {
						CirMenuHandler.ShowOne();
					}, 1800);
				} else {

				}
			},
			ShowOne: function() {
				var itemCount = 12;
				var itemRadian = Number(360 / itemCount);
				for (var i = 0; i < $(".item").length; i  ) {
					var raius = itemRadian * i;
					var x = Math.sin(raius * Math.PI / 180) * CirMenuHandler.radiusLength * 2   CirMenuHandler.radiusPointX;
					var y = CirMenuHandler.radiusPointY - Math.cos(raius * Math.PI / 180) * CirMenuHandler.radiusLength * 2;
					$($(".item")[i]).animate({
						marginLeft: x   "px",
						marginTop: y   "px",
						opacity: 1
					}, 500, function() {
						$(this).animate({
							marginLeft: CirMenuHandler.radiusPointX   "px",
							marginTop: CirMenuHandler.radiusPointY   "px",
							opacity: 0
						}, 300);
					});
				}

				for (var i = 0; i < $(".item").length; i  ) {
					var raius = itemRadian * i;
					var x = Math.sin(raius * Math.PI / 180) * CirMenuHandler.radiusLength * 2   CirMenuHandler.radiusPointX;
					var y = CirMenuHandler.radiusPointY - Math.cos(raius * Math.PI / 180) * CirMenuHandler.radiusLength * 2;
					$($(".item2")[i]).animate({
						marginLeft: x   "px",
						marginTop: y   "px",
						opacity: 1
					}, 1000, function() {
						$(this).animate({
							marginLeft: CirMenuHandler.radiusPointX   "px",
							marginTop: CirMenuHandler.radiusPointY   "px",
							opacity: 0
						}, 600);
					});
				}
			}
		}