html,
body,
.loader {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
}

.loader {
	width: 10em;
	height: 10em;
	font-size: 28px;
	position: relative;
}

.loader span {
	position: absolute;
	background-color: hsla(0, 100%, 50%, 0.3);
	box-sizing: border-box;
	border: 0.5em solid;
	border-color: white rgba(100%, 100%, 100%, 0.2);
	width: calc(20% + 20% * (5 - var(--n)));
	height: calc(20% + 20% * (5 - var(--n)));
	animation: 
		change-color 5s ease-in-out infinite alternate,
		rotating 5s ease-in-out infinite alternate;
	animation-delay: calc(0.2s * (5 - var(--n)));
}

@keyframes change-color {
	to {
		filter: hue-rotate(1turn);
	}
}

@keyframes rotating {
	to {
		transform: rotate(2turn);
	}
}

.loader span:nth-child(1) {
	--n: 1;
}

.loader span:nth-child(2) {
	--n: 2;
}

.loader span:nth-child(3) {
	--n: 3;
}

.loader span:nth-child(4) {
	--n: 4;
}

.loader span:nth-child(5) {
	--n: 5;
}