html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}


.loading-container {
	width: 75px;
	height: 75px;
	display: flex;
	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.loading-container > * {
	flex-shrink: 0;
}

.loading-container > span {
	width: 100%;
	position: relative;
	left: -100%;
	text-align: center;
	font-size: 0.8em;
}

.loading {
	width: 100%;
	height: 100%;
	display: flex;
	z-index: 1;
}

.loading-part1, .loading-part2, .loading-part3, .loading-part4 {
	width: calc(0.25 * 100%);
	height: calc(0.25 * 100%);
	flex-shrink: 0;
	background-color: purple;
	position: relative;
	border-radius: 10px;
}

.loading-part1 {
	background-color: blue;
	animation: loading-animation ease 2s;
	animation-iteration-count: infinite;
}

.loading-part2 {
	left: calc(0.25 * -100%);
	background-color: red;
	animation: loading-animation ease 2s;
	animation-delay: -500ms;
	animation-iteration-count: infinite;
}

.loading-part3 {
	left: calc(0.25 * -200%);
	background-color: gold;
	animation: loading-animation ease 2s;
	animation-delay: -1000ms;
	animation-iteration-count: infinite;
}

.loading-part4 {
	left: calc(0.25 * -300%);
	background-color: green;
	animation: loading-animation ease 2s;
	animation-delay: -1500ms;
	animation-iteration-count: infinite;
}

@keyframes loading-animation {
	0% {
		transform: translateX(0) translateY(0);
	}

	25% {
		transform: translateX(calc(((1 / 0.25) - 1) * 100%)) translateY(0);
	}

	50% {
		transform: translateX(calc(((1 / 0.25) - 1) * 100%)) translateY(calc(((1 / 0.25) - 1) * 100%));
	}

	75% {
		transform: translateX(0) translateY(calc(((1 / 0.25) - 1) * 100%));
	}

	100% {
		transform: translateX(0) translateY(0);
	}
}