PROWAREtech
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
Comment
