@include keyframes(animateLoader) {
	0% {
		@include transform( rotate(0deg) );
	}
	100% {
		@include transform( rotate(220deg) );
	}
}

@include keyframes(animateLoaderAfterWhite) {
	0% {
		box-shadow: 0 0 0 6px #FFF inset;
		@include transform( rotate(-140deg) );
	}
	50% {
		box-shadow: 0 0 0 2px #FFF inset;
	}
	100% {
		box-shadow: 0 0 0 6px #FFF inset;
		@include transform( rotate(140deg) );
	}
}

@include keyframes(animateLoaderAfterBlack) {
	0% {
		box-shadow: 0 0 0 6px #999 inset;
		@include transform( rotate(-140deg) );
	}
	50% {
		box-shadow: 0 0 0 2px #999 inset;
	}
	100% {
		box-shadow: 0 0 0 6px #999 inset;
		@include transform( rotate(140deg) );
	}
}

.loading-overlay-showing {
	overflow: hidden;

	& > .loading-overlay {
		opacity: 1;
		visibility: visible;
		@include transition-delay( 0 );
	}
}

.loading-overlay {
	@include transition( visibility 0s ease-in-out 0.5s, opacity 0.5s ease-in-out );
	bottom: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	right: 0;
	top: 0;
	visibility: hidden;
	background: #FFF;

	.loader {
		@include animation( animateLoader 1s linear infinite );
		clip: rect(0, 30px, 30px, 15px);
		height: 30px;
		left: 50%;
		margin-left: -15px;
		margin-top: -15px;
		position: absolute;
		text-align: left;
		top: 50%;
		width: 30px;
		direction: ltr;

		&:after {
			border-radius: 50%;
			clip: rect(0, 30px, 30px, 15px);
			content: '';
			height: 30px;
			position: absolute;
			width: 30px;
		}
	}
}

html:not(.dark) .loading-overlay {
	.loader {
		&:after {
			@include animation( animateLoaderAfterBlack 1s ease-in-out infinite );
		}
	}
}

body > .loading-overlay {
	position: fixed;
	z-index: 999999;
}

/* Bounce Loading */
.bounce-loader {
	@include transition (all 0.2s);
	margin: -9px 0 0 -35px;
	text-align: center;
	width: 70px;
	left: 50%;
	position: absolute;
	top: 50%;
	z-index: 10000;

	.bounce1,
	.bounce2,
	.bounce3 {
	    animation: 1.4s ease-in-out 0s normal both infinite running bouncedelay;
	    background-color: #CCC;
	    border-radius: 100%;
	    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
	    display: inline-block;
	    height: 18px;
	    width: 18px;
	}

	.bounce1 {
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.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) }
}

@keyframes bouncedelay {
	0%, 80%, 100% {transform: scale(0.0);} 
	40% {transform: scale(1.0);}
}