.ajax-loader {
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: 
		opacity 0.5s linear,
		transform 0s linear 0.5s;	
	opacity: 0;
	font-size: 50px;
	z-index: 9999;	
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.ajax-loader.loading {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s linear;
}
.ajax-loader-close {
	color: #fff;
	position: absolute;
	right: 15px;
	top: 15px;
	cursor: pointer;
	font-size: 30px;
}
.ajax-loader::before {
	font-family: 'FontAwesome';
	content: '\f110';
	animation: spin 2s linear;
    animation-iteration-count: infinite; 
}
.ajax-loader.clock::before {content: '\f017';}
.ajax-loader.spinner2::before {content: '\f1ce';}
.ajax-loader.gear::before {content: '\f013';}
.ajax-loader.repeat::before {content: '\f01e';}
.ajax-loader.no-fontawesome::before {content: '\25CC';}
.ajax-loader.no-fontawesome i::before {content: '\2716';}
.ajax-loader.stars {
	font-size: 30px;
}
.ajax-loader.stars::before {
	animation: stars 2s linear;
	animation-iteration-count: infinite; 
}
.ajax-loader.dots {
	font-size: 20px;
}
.ajax-loader.dots::before {
	animation: dots 2s linear;
	animation-iteration-count: infinite; 
}
.ajax-loader.circles {
	font-size: 20px;
}
.ajax-loader.circles::before {
	animation: circles 2s linear;
	animation-iteration-count: infinite; 
}
.ajax-loader.no-spinner::before {display: none;}
.ajax-loader[data-text]::after {
	content: attr(data-text); 
	font-size: 20px;
	margin-top: 20px;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
@keyframes stars {
	0% {content: '\f006 \00a0 \f006 \00a0 \f006 \00a0 \f006 \00a0 \f006 ';}
	25% {content: '\f006 \00a0 \f006 \00a0 \f006 \00a0 \f006 \00a0 \f006 ';}
	30% {content: '\f123 \00a0 \f006 \00a0 \f006 \00a0 \f006 \00a0 \f006 ';}
	35% {content: '\f005 \00a0 \f006 \00a0 \f006 \00a0 \f006 \00a0 \f006 ';}
	40% {content: '\f005 \00a0 \f123 \00a0 \f006 \00a0 \f006 \00a0 \f006 ';}
    45% {content: '\f005 \00a0 \f005 \00a0 \f006 \00a0 \f006 \00a0 \f006 ';}
	50% {content: '\f005 \00a0 \f005 \00a0 \f123 \00a0 \f006 \00a0 \f006 ';}
	55% {content: '\f005 \00a0 \f005 \00a0 \f005 \00a0 \f006 \00a0 \f006 ';}
	60% {content: '\f005 \00a0 \f005 \00a0 \f005 \00a0 \f123 \00a0 \f006 ';}
    65% {content: '\f005 \00a0 \f005 \00a0 \f005 \00a0 \f005 \00a0 \f006 ';}
	70% {content: '\f005 \00a0 \f005 \00a0 \f005 \00a0 \f005 \00a0 \f123 ';}
    75% {content: '\f005 \00a0 \f005 \00a0 \f005 \00a0 \f005 \00a0 \f005 ';}
	100% {content: '\f005 \00a0 \f005 \00a0 \f005 \00a0 \f005 \00a0 \f005 ';}
}
@keyframes dots {
	0% {content: '\f0c8 \00a0 \f096 \00a0 \f096 \00a0 \f096 \00a0 \f096';}
	20% {content: '\f096 \00a0 \f0c8 \00a0 \f096 \00a0 \f096 \00a0 \f096';}
	40% {content: '\f096 \00a0 \f096 \00a0 \f0c8 \00a0 \f096 \00a0 \f096';}
	65% {content: '\f096 \00a0 \f096 \00a0 \f096 \00a0 \f0c8 \00a0 \f096';}
	80% {content: '\f096 \00a0 \f096 \00a0 \f096 \00a0 \f096 \00a0 \f0c8';}
	100% {content: '\f0c8 \00a0 \f096 \00a0 \f096 \00a0 \f096 \00a0 \f096';}
}
@keyframes circles {
	0% {content: '\f10c \00a0 \f10c \00a0 \f10c \00a0 \f10c \00a0 \f10c';}
	17% {content: '\f111 \00a0 \f10c \00a0 \f10c \00a0 \f10c \00a0 \f10c';}
	34% {content: '\f10c \00a0 \f111 \00a0 \f10c \00a0 \f10c \00a0 \f10c';}
	51% {content: '\f10c \00a0 \f10c \00a0 \f111 \00a0 \f10c \00a0 \f10c';}
	68% {content: '\f10c \00a0 \f10c \00a0 \f10c \00a0 \f111 \00a0 \f10c';}
	85% {content: '\f10c \00a0 \f10c \00a0 \f10c \00a0 \f10c \00a0 \f111';}
	100% {content: '\f10c \00a0 \f10c \00a0 \f10c \00a0 \f10c \00a0 \f10c';}
}

.ajax-loader.image1::before, 
.ajax-loader.image2::before,
.ajax-loader.image3::before, 
.ajax-loader.image4::before {
	content: ''; width: 50px; height: 50px; display: inline-block; background-repeat: no-repeat;
}
.ajax-loader.image1::before {background-image: url(images/spinner-01.png);}
.ajax-loader.image2::before {background-image: url(images/spinner-02.png);}
.ajax-loader.image3::before {background-image: url(images/spinner-03.png);}
.ajax-loader.image4::before {background-image: url(images/spinner-04.png);}