CSS实现繁忙加载样式

.circle_loading {
    background-color: rgba(0,0,0,0); //背景颜色
    border: 5px solid rgba(0,183,229,0.9); //实心圆环宽度，颜色
    opacity: .9; //设置不透明级别
    border-top: 5px solid rgba(0,0,0,0); 
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;   //边框圆角半径
    box-shadow: 0 0 35px #2187e7; //设置阴影
    width: 50px;  
    height: 50px;
    margin: 0 auto;   //设置盒子间距
    -moz-animation: spin .5s infinite linear;// 设置旋转周期，方向
    -webkit-animation: spin .5s infinite linear;
}

.circle_loading_content {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoff .5s infinite linear;
    -webkit-animation: spinoff .5s infinite linear;
}
.circle_loading_text{
	width: 100%;
	height: 50px;
    color: #dadada;
    text-align: center;
}

 这是三个样式，前两个都是两个类似鼠标忙碌的两个圆环转动，只是一个较大，一个较小,

function (flag,text) {
	
	$("#circleLoadingDiv").remove();
	var layer = $('<div class="circle_loadingDiv" id="circleLoadingDiv">'+
			'<div class="circle_loading"></div>'+
			'<div class="circle_loading_content"></div>'+
			'<div class="circle_loading_text"></div>'+
		'</div>');
	var body = $('body');
	body.append(layer);
	if(text != undefined) {
		$(".circle_loading_text").html(text);
	}
	if(!flag || flag == false) {
		flag = "none";
	}else {
		flag = "block";
	}
//	$("#maskLayer").css("display",dis);
	$("#circleLoadingDiv").css("display",flag);
	return body;
}

 这样就实现了加载中缓冲动画