Laser Lights Loading Animation Page

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