.loader-bar,
.loader-spinner {
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	z-index: 9999;
}

/* .loader-bar {{{ */
.loader-bar {
	height: 5px;

	display: none;
	transition: opacity 0.5s ease-in;
	width: 100vw;
}

.loader-bar::after,
.loader-bar::before {
	background-color: #ac348c;

	content: '';
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}

.loader-bar::after {
	animation-duration: 20s;
	animation-timing-function: ease-out;

	animation-name: loader-slide;
	animation-iteration-count: 1;
	transform: translate3d( -5vw, 0, 0 );
}

.loader-bar::before {
	transform: translate3d( -100vw, 0, 0 );
}

.loading-foreground .loader-bar,
.loading-foreground-closing .loader-bar {
	display: block;
}

.loading-foreground-closing .loader-bar {
	opacity: 0;
	transition: opacity 0.5s ease-out 0.5s;
}

.loading-foreground-closing .loader-bar::before {
	animation: 1s ease-out loader-slide-complete 1;
	transform: translate3d( 0, 0, 0 );
}
/* }}} */

/* .loader-spinner {{{ */
.loader-spinner {
	color: #555;
	font-family: sans-serif;
	margin: 15px;

	display: none;
	height: 20px;
	line-height: 20px;
	padding: 0 25px;
	transition: opacity 0.4s ease-in;
}
.loading-background .loader-spinner {
	opacity: 0.5;
}

.loader-spinner::before {
	animation-duration: 0.75s;
	animation-timing-function: linear;
	border-color: #ac348c;
	border-style: solid;
	border-width: 2px;

	animation-name: loader-rotate;
	animation-iteration-count: infinite;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	content: '';
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	width: 20px;
}

.loading .loader-spinner,
.loading-background-closing .loader-spinner,
.loading-foreground-closing .loader-spinner {
	display: block;
}

.loading-foreground-closing .loader-spinner,
.loading-background-closing .loader-spinner {
	opacity: 0;
	transition: opacity 0.4s ease-out;
}
/* }}} */

/* Animations {{{ */
@keyframes loader-rotate {
	from { transform: rotate( 0deg ); }
	to { transform: rotate( 360deg ); }
}

@keyframes loader-slide {
	from { transform: translate3d( -100vw, 0, 0 ); }
	to { transform: translate3d( -5vw, 0, 0 ); }
}

@keyframes loader-slide-complete {
	0% { transform: translate3d( -75vw, 0, 0 ); }
	50% { transform: translate3d( 0, 0, 0 ); }
}
/* }}} */

/* Utility classes - .(hidden|visible)-loading[-foreground|-background] {{{ */
body.loading .hidden-loading { display: none }
body.loading-foreground .hidden-loading-foreground { display: none }
body.loading-background .hidden-loading-background { display: none }

body.loading .visible-loading { display: block }
body.loading-foreground .visible-loading-foreground { display: block }
body.loading-background .visible-loading-background { display: block }
body:not(.loading) .visible-loading { display: none }
body:not(.loading-foreground) .visible-loading-foreground { display: none }
body:not(.loading-background) .visible-loading-background { display: none }
/* }}} */