index.html
<!DOCTYPE html>
<html>
<head>
<title>Hancie e-Learning Studio</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.
1/jquery.min.js"></script>
</head>
<body>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #16191E;
}
header{
background-color: #2A88E6;
color: #ffffff;
font-family: 'Poppins',sans-serif;
text-align: center;
margin-bottom: 20px;
letter-spacing: 0.5px;
padding: 10px 0;
}
h3{
font-size: 50px;
}
h5{
font-size: 30px;
}
.img-container{
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(300px,1fr)
);
grid-gap: 30px;
}
img{
width: 100%;
}
.content{
display: none;
}
.loader{
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #16191e;
position: absolute;
}
.loader>div{
height: 100px;
width: 100px;
border: 15px solid #45474b;
border-top-color: #2a88e6;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
animation: spin 1.5s infinite linear;
}
@keyframes spin{
100%{
transform: rotate(360deg);
}
}
</style>
<div class="loader">
<div></div>
</div>
<div class="content">
<header>
<h3>Display Loading Div</h3>
<h5>Until Page Loads</h5>
</header>
<div class="img-container">
<img src="https://dl.dropbox.com/s/aepxrq5000nl07c/pexels-valeriia
-miller-3910066.jpg?raw=1">
<img src="https://dl.dropbox.com/s/53datlys0ouo44w/pexels-sohail-
na-807598.jpg?raw=1">
<img src="https://dl.dropbox.com/s/kn0a0vianm6kwib/pexels-thuyen-
vu-297756.jpg?raw=1">
<img src="https://dl.dropbox.com/s/h981xwas85ksm2i/pexels-tirachard
-kumtanom-347141.jpg?raw=1">
<img src="https://dl.dropbox.com/s/dqysqhkg9affs0q/pexels-roberto-
nickson-2775196.jpg?raw=1">
<img src="https://dl.dropbox.com/s/nz15xcf9wxl0azm/pexels-nina-uhl
%C3%ADkov%C3%A1-725255.jpg?raw=1">
<img src="https://dl.dropbox.com/s/e0ypcd3bloz6ek6/pexels-ella-ols
son-1640777.jpg?raw=1">
<img src="https://dl.dropbox.com/s/pbd8ui8noa5ar6j/pexels-burst-373
912.jpg?raw=1">
<img src="https://dl.dropbox.com/s/yr4urvio1gjg5vf/pexels-abby-chung
-1191377.jpg?raw=1">
</div>
</div>
<script>
$(window).on('load',function(){
$(".loader").fadeOut(1000);
$(".content").fadeIn(1000);
});
</script>
</body>
</html>
