Data-Gatherer Loading Animation Page

Here is an abstract net-like object that is gathering data.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Loading Page</title>
	<style>
	body {
		background-color: white;
		color: black;
		padding: 0;
		margin: 0;
	}
	.flex-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	.loading {
		position: relative;
		width: 160px;
		height: 160px;
		transform-style: preserve-3d;
		transform: perspective(2000px) rotateX(60deg) rotateY(-30deg);
	}
	@keyframes loading {
		0%,100% { transform: translate3d(0, 0, -150px); }
		25% { transform: translate3d(-25px, -50px, 100px); }
		50% { transform: translate3d(-50px, 50px, -50px); }
		75% { transform: translate3d(150px, -50px, 150px); }
	}
	.loading .r {
		position: absolute;
		border: 7px solid crimson;
		box-shadow: 0 7px 0 dodgerblue, inset 0 7px 0 dodgerblue;
		animation: loading 5s ease-in-out infinite;
		border-radius: 100vmax;
		box-sizing: border-box;
	}
	.loading .r:nth-child(1) {
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		animation-delay: 0s;
	}
	.loading .r:nth-child(2) {
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		animation-delay: .05s;
	}
	.loading .r:nth-child(3) {
		top: 20px;
		left: 20px;
		right: 20px;
		bottom: 20px;
		animation-delay: .1s;
	}
	.loading .r:nth-child(4) {
		top: 30px;
		left: 30px;
		right: 30px;
		bottom: 30px;
		animation-delay: .15s;
	}
	.loading .r:nth-child(5) {
		top: 40px;
		left: 40px;
		right: 40px;
		bottom: 40px;
		animation-delay: .2s;
	}
	.loading .r:nth-child(6) {
		top: 50px;
		left: 50px;
		right: 50px;
		bottom: 50px;
		animation-delay: .25s;
	}
	.loading .r:nth-child(7) {
		top: 60px;
		left: 60px;
		right: 60px;
		bottom: 60px;
		animation-delay: .3s;
	}
	.loading .r:nth-child(8) {
		top: 70px;
		left: 70px;
		right: 70px;
		bottom: 70px;
		animation-delay: .35s;
	}
	</style>
</head>
<body>

<div id="root">
	<div class="flex-container">
		<div class="loading">
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
		</div>
		<div>Gathering data, please wait...</div>
	</div>
</div>
		
</body>
</html>

Coding Video

https://youtu.be/KGjRbYsLLbo