I want to create a loading screen that appears before the index.html loads for the client
Here is the HTML Code:
<section class="loading text-center">
<div class="spinner">
<img class="img" src="img/logo.png" width="160" height="211" />
</div>
</section>
CSS Code: This code customizes the design of the loading page
.loading {
background-color: #fcfdff;
color: #000;
position: absolute;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.spinner {
position: fixed;
top: 30%;
left: 45%;
transform: translate(-50%, -50%);
background-color: transparent;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
.img {
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(0px)
}
50% {
-webkit-transform: perspective(0px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(0px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(0px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(0px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(0px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(0px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(0px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(0px) rotateX(-180deg) rotateY(-179.9deg);
}
}
jQuery Code: This code controls when the scroll should show after the loading screen
/*global $, window, document, jQuery */
// Loading Screen
$(window).load(function () {
"use strict";
$(".loading .spinner").fadeOut(2000, function () {
$(this).parent().fadeOut(2000, function () {
//Show The Scroll
$("body").css("overflow", "auto");
$(this).remove();
});
});
});
However, the issue is that the loading page appears, everything seems fine, but the index.html does not appear after 2ms to display the website