PROWAREtech

articles » current » css » loading-page-inch-worm

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

https://youtu.be/xrnY6G4Lt_w


PROWAREtech

Hello there! How can I help you today?
Ask any question

PROWAREtech

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