html {height: 100vh}

.loadingIndicator {
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 300px;
	background: #ED4E6E;
	transition: transform 0.3s;
	transform: translateX(100%) translateY(-100%) rotate(45deg);
	pointer-events: none;
}

.loadingIndicator.animate {
	transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.loadingIndicator::before,
.loadingIndicator::after {
	position: absolute;
	bottom: 30px;
	left: 50%;
	display: block;
	border: 5px solid #FFF;
	border-radius: 50%;
	content: '';
}

.loadingIndicator::before {
	margin-left: -40px;
	width: 80px;
	height: 80px;
	border-right-color: #BB344F;
	border-left-color: #BB344F;
	animation: spin 3s linear infinite;
}

.loadingIndicator::after {
	bottom: 50px;
	margin-left: -20px;
	width: 40px;
	height: 40px;
	border-top-color: #BB344F;
	border-bottom-color: #BB344F;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0%	{ transform: rotate(0deg); }
	50%	{ transform: rotate(180deg); }
	100%	{ transform: rotate(360deg); }
}