PROWAREtech

articles » current » css » loading-page-sine-wave

CSS: Loading Page - Sine Wave

A sine wave to watch as the page loads.

Here is an animated sine wave loading page. It is blocky. It could be further refined to have smaller sized blocks but the CSS will get quite long.

<!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 {
		width: 80px;
		height: 30px;
		position: relative;
	}
	@keyframes loading {
		0%,100% {top: -10px;}
		25% {top: 10px;}
		50% {top: -10px;}
		75% {top: 10px;}
	}
	.loading .x {
		position: absolute;
		animation: loading 1.5s ease-in-out infinite;
		width: 10px;
		height: 10px;
	}
	.loading .x:nth-child(1) {
		left: 0px;
		background-color: rgb(32,0,0);
		animation-delay: 0s;
	}
	.loading .x:nth-child(2) {
		left: 10px;
		background-color: rgb(64,0,0);
		animation-delay: .1s;
	}
	.loading .x:nth-child(3) {
		left: 20px;
		background-color: rgb(96,0,0);
		animation-delay: .2s;
	}
	.loading .x:nth-child(4) {
		left: 30px;
		background-color: rgb(128,0,0);
		animation-delay: .3s;
	}
	.loading .x:nth-child(5) {
		left: 40px;
		background-color: rgb(160,0,0);
		animation-delay: .4s;
	}
	.loading .x:nth-child(6) {
		left: 50px;
		background-color: rgb(192,0,0);
		animation-delay: .5s;
	}
	.loading .x:nth-child(7) {
		left: 60px;
		background-color: rgb(224,0,0);
		animation-delay: .6s;
	}
	.loading .x:nth-child(8) {
		left: 70px;
		background-color: rgb(255,0,0);
		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/8u9z8sAO1m8


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