.loading-in-progress {
	align-items: center;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.loading-spinner {
	position: relative;
	overflow: visible;
	/* Size of each loading dot */
	--size: 24px;
	/* Radius to extend dots while spinning */
	--radius: 60px;
}

/* Extend the dots outward, spin them, then retract */
@keyframes load-spin {
	0% {
		--rad: 0px;
		--rot: 0deg;
	}
	10% {
		--rad: var(--radius);
		--rot: 0deg;
	}
	80% {
		--rad: var(--radius);
		--rot: 360deg;
	}
	90% {
		--rad: 0px;
		--rot: 360deg;
	}
	100% {
		--rad: 0px;
		--rot: 0deg;
	}
}

@property --rad {
	syntax: '<length>';
	initial-value: 0;
	inherits: false;
}

@property --rot {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

/* Give each dot a different starting rotation */
.dot:nth-child(1) {
	--angle: 0deg;
}
.dot:nth-child(2) {
	--angle: 90deg;
}
.dot:nth-child(3) {
	--angle: 180deg;
}
.dot:nth-child(4) {
	--angle: 270deg;
}

.dot {
	position: absolute;
	background-color: #d0d0d0;
	border-radius: 999px;
	width: var(--size);
	height: var(--size);

	animation-name: load-spin;
	animation-duration: 2.75s;
	animation-iteration-count: infinite;

	will-change: transform;

	transform: rotate(var(--angle)) rotate(var(--rot)) translateX(var(--rad));
}