Brine Shrimp Loading Animation Page

Here is an abstract animated brine shrimp (a.k.a. sea monkeys) loading page.

<!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;
		margin: 0;
		padding: 0;
	}
	.flex-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	.loading {
		display: flex;
		align-items: center;
		height: 60px;
	}
	@keyframes loading {
		0%,100% { height: 0; }
		50% { height: 50px; }
	}
	.loading .x {
		background-color: dodgerblue;
		animation: loading .8s infinite;
		width: 10px;
		height: 0;
		margin: 0 3px;
		border-radius: 10px;
	}
	.loading .x:nth-child(2) {animation-delay: .1s;}
	.loading .x:nth-child(3) {animation-delay: .2s;}
	.loading .x:nth-child(4) {animation-delay: .3s;}
	.loading .x:nth-child(5) {animation-delay: .4s;}
	.loading .x:nth-child(6) {animation-delay: .5s;}
	.loading .x:nth-child(7) {animation-delay: .6s;}
	.loading .x:nth-child(8) {animation-delay: .7s;}
	</style>
</head>
<body>

<div id="root">
	<div class="flex-container">
		<div class="loading">
			<div class="x"></div>
			<div class="x"></div>
			<div class="x"></div>
			<div class="x"></div>
			<div class="x"></div>
			<div class="x"></div>
			<div class="x"></div>
			<div class="x"></div>
		</div>
		<div>Please wait...</div>
	</div>
</div>
		
</body>
</html>

Coding Video

https://youtu.be/Ju0jmU0Pc5k