PROWAREtech
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
Comment
