PROWAREtech
CSS: Loading Page - Inch Worm
Create an abstract inch worm that inches along as the page is loading.
Here is an abstract inch worm loading animation 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;
transform: perspective(1000px) rotateX(60deg);
transform-style: preserve-3d;
height: 60px;
}
@keyframes loading {
0%,100% {
height: 10px;
transform: translateZ(-20px);
}
50% {
height: 40px;
transform: translateZ(20px);
}
}
.loading .x {
background-color: green;
animation: loading .8s infinite;
width: 10px;
height: 0;
margin: 0 1px;
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
