.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;
	width: 100%;
	height: 100%;
	/* Measure container size for responsive children */
	container: loader / size;
}

/* 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;
	left: 50%;
	top: 50%;

	background-color: #d0d0d0;
	border-radius: 999px;

	width: 6cqmin;
	max-width: 24px;
	height: auto;
	aspect-ratio: 1;

	--radius: min(15cqmin, 68px);

	animation-name: load-spin;
	animation-duration: 2.75s;
	animation-iteration-count: infinite;
	/* Keeps animation from jittering when repeatedly reloaded */
	animation-delay: 1000ms;

	will-change: transform;

	transform: translate(-50%, -50%) rotate(var(--angle)) rotate(var(--rot))
		translateX(var(--rad));
}