PROWAREtech

articles » current » css » loading-page-laser-lights

CSS: Loading Page - Laser Lights

Create a nerve racking light show while the page is loading.

Use a laser light show for a 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: black;
		color: white;
		margin: 0;
		padding: 0;
	}
	.flex-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		position: relative;
	}
	.loading-text {
		position: absolute;
	}
	.loading {
		display: flex;
		align-items: center;
		transform: perspective(1px) rotateX(90deg);
		transform-style: preserve-3d;
	}
	@keyframes loading {
		0%,100% {
			height: 0;
			transform: translateZ(-20px);
		}
		25% {
			height: 25px;
			transform: translateZ(20px);
		}
		50% {
			height: 50px;
			transform: translateZ(-20px);
		}
		75% {
			height: 75px;
			transform: translateZ(20px);
		}
	}
	.loading .l {
		background-color: chartreuse;
		animation: loading .8s ease-in-out infinite;
		width: 10px;
		height: 0;
		box-shadow: 0 0 5px chartreuse; /* optional */
	}
	.loading .l:nth-child(2) {animation-delay: .1s;}
	.loading .l:nth-child(3) {animation-delay: .2s;}
	.loading .l:nth-child(4) {animation-delay: .3s;}
	.loading .l:nth-child(5) {animation-delay: .4s;}
	.loading .l:nth-child(6) {animation-delay: .5s;}
	.loading .l:nth-child(7) {animation-delay: .6s;}
	.loading .l:nth-child(8) {animation-delay: .7s;}
	</style>
</head>
<body>

<div id="root">
	<div class="flex-container">
		<div class="loading">
			<div class="l"></div>
			<div class="l"></div>
			<div class="l"></div>
			<div class="l"></div>
			<div class="l"></div>
			<div class="l"></div>
			<div class="l"></div>
			<div class="l"></div>
		</div>
		<div class="loading-text">Loading, please wait...</div>
	</div>
</div>
		
</body>
</html>

Coding Video

https://youtu.be/55RWHTHLsq0


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