articles » current » css » loading-page-brine-shrimp

CSS: Loading Page - Brine Shrimp

Create an abstract brine shrimp swimming along while the page is loading

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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE