div[role='loading'] {
	position: relative;
    margin:0 auto;
	width: 84px;
	height: 84px;
	background-color: rgba(0,0,0,.6);
	border: 10px solid rgba(0,0,0,0);
	border-radius: 6px;
}
div[role='loading']:before {
 content: attr(data-loading-text);
 font-size: 12px;
 color: #fff;
 position: absolute;
 left: 0;
 top: 0;
}
div[role='loading'] .lodingCircular {
	position: absolute;
	background-color: rgba(255,255,255,.8);
	width: 15px;
	height: 15px;
	-moz-border-radius: 10px;
	-moz-animation-name: bounce_lodingCircular;
	-moz-animation-duration: 1.28s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: linear;
	-webkit-border-radius: 10px;
	-webkit-animation-name: bounce_lodingCircular;
	-webkit-animation-duration: 1.28s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: linear;
	-ms-border-radius: 10px;
	-ms-animation-name: bounce_lodingCircular;
	-ms-animation-duration: 1.28s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: linear;
	-o-border-radius: 10px;
	-o-animation-name: bounce_lodingCircular;
	-o-animation-duration: 1.28s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: linear;
	border-radius: 10px;
	animation-name: bounce_lodingCircular;
	animation-duration: 1.28s;
	animation-iteration-count: infinite;
	animation-direction: linear;
}
#lodingCircular_1 {
	left: 0;
	top: 25px;
	-moz-animation-delay: 0.48s;
	-webkit-animation-delay: 0.48s;
	-ms-animation-delay: 0.48s;
	-o-animation-delay: 0.48s;
	animation-delay: 0.48s;
}
#lodingCircular_2 {
	left: 7px;
	top: 7px;
	-moz-animation-delay: 0.64s;
	-webkit-animation-delay: 0.64s;
	-ms-animation-delay: 0.64s;
	-o-animation-delay: 0.64s;
	animation-delay: 0.64s;
}
#lodingCircular_3 {
	top: 0;
	left: 25px;
	-moz-animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
	-ms-animation-delay: 0.8s;
	-o-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
#lodingCircular_4 {
	right: 7px;
	top: 7px;
	-moz-animation-delay: 0.96s;
	-webkit-animation-delay: 0.96s;
	-ms-animation-delay: 0.96s;
	-o-animation-delay: 0.96s;
	animation-delay: 0.96s;
}
#lodingCircular_5 {
	right: 0;
	top: 25px;
	-moz-animation-delay: 1.12s;
	-webkit-animation-delay: 1.12s;
	-ms-animation-delay: 1.12s;
	-o-animation-delay: 1.12s;
	animation-delay: 1.12s;
}
#lodingCircular_6 {
	right: 7px;
	bottom: 7px;
	-moz-animation-delay: 1.28s;
	-webkit-animation-delay: 1.28s;
	-ms-animation-delay: 1.28s;
	-o-animation-delay: 1.28s;
	animation-delay: 1.28s;
}
#lodingCircular_7 {
	left: 25px;
	bottom: 0;
	-moz-animation-delay: 1.44s;
	-webkit-animation-delay: 1.44s;
	-ms-animation-delay: 1.44s;
	-o-animation-delay: 1.44s;
	animation-delay: 1.44s;
}
#lodingCircular_8 {
	left: 7px;
	bottom: 7px;
	-moz-animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s;
	-ms-animation-delay: 1.6s;
	-o-animation-delay: 1.6s;
	animation-delay: 1.6s;
}
@-moz-keyframes bounce_lodingCircular {
	0% {
		-moz-transform: scale(1)
	}
	100% {
		-moz-transform: scale(.3)
	}
}
@-webkit-keyframes bounce_lodingCircular {
	0% {
		-webkit-transform: scale(1)
	}
	100% {
		-webkit-transform: scale(.3)
	}
}
@-ms-keyframes bounce_lodingCircular {
	0% {
		-ms-transform: scale(1)
	}
	100% {
		-ms-transform: scale(.3)
	}
}
@-o-keyframes bounce_lodingCircular {
	0% {
		-o-transform: scale(1)
	}
	100% {
		-o-transform: scale(.3)
	}
}
@keyframes bounce_lodingCircular {
	0% {
		transform: scale(1)
	}
	100% {
		transform: scale(.3)
	}
}