articles » current » css » loading-page-data-gatherer

CSS: Loading Page - Data Gatherer

Create an abstract net that appears to be gathering data as it animates

Here is an abstract net-like object that is gathering data.

<!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;
		padding: 0;
		margin: 0;
	}
	.flex-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	.loading {
		position: relative;
		width: 160px;
		height: 160px;
		transform-style: preserve-3d;
		transform: perspective(2000px) rotateX(60deg) rotateY(-30deg);
	}
	@keyframes loading {
		0%,100% { transform: translate3d(0, 0, -150px); }
		25% { transform: translate3d(-25px, -50px, 100px); }
		50% { transform: translate3d(-50px, 50px, -50px); }
		75% { transform: translate3d(150px, -50px, 150px); }
	}
	.loading .r {
		position: absolute;
		border: 7px solid crimson;
		box-shadow: 0 7px 0 dodgerblue, inset 0 7px 0 dodgerblue;
		animation: loading 5s ease-in-out infinite;
		border-radius: 100vmax;
		box-sizing: border-box;
	}
	.loading .r:nth-child(1) {
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		animation-delay: 0s;
	}
	.loading .r:nth-child(2) {
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		animation-delay: .05s;
	}
	.loading .r:nth-child(3) {
		top: 20px;
		left: 20px;
		right: 20px;
		bottom: 20px;
		animation-delay: .1s;
	}
	.loading .r:nth-child(4) {
		top: 30px;
		left: 30px;
		right: 30px;
		bottom: 30px;
		animation-delay: .15s;
	}
	.loading .r:nth-child(5) {
		top: 40px;
		left: 40px;
		right: 40px;
		bottom: 40px;
		animation-delay: .2s;
	}
	.loading .r:nth-child(6) {
		top: 50px;
		left: 50px;
		right: 50px;
		bottom: 50px;
		animation-delay: .25s;
	}
	.loading .r:nth-child(7) {
		top: 60px;
		left: 60px;
		right: 60px;
		bottom: 60px;
		animation-delay: .3s;
	}
	.loading .r:nth-child(8) {
		top: 70px;
		left: 70px;
		right: 70px;
		bottom: 70px;
		animation-delay: .35s;
	}
	</style>
</head>
<body>

<div id="root">
	<div class="flex-container">
		<div class="loading">
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
			<div class="r"></div>
		</div>
		<div>Gathering data, please wait...</div>
	</div>
</div>
		
</body>
</html>

Coding Video

https://youtu.be/KGjRbYsLLbo


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