I have a website in HTML, CSS, JS, and PHP. On my home page, I have included a page for pre-loader. I want to load this pre-loader only when the website opens first time. I don’t want to see the pre-loader again when we refresh the page or when we go to the home page from another page. Following codes are as follow-
window.addEventListener('load', function() {
var roll = document.getElementById('loading-page');
var blp = document.getElementById('bottom-loading');
var mbl = document.getElementById('main_bottom_loading');
var ml = document.getElementById('main_load');
var ppm = document.getElementById('ows_main');
var i = 0;
var interval = setInterval(function() {
// mbl.style.height = '0vh';
mbl.style.transition = 'all 2s ease-in-out';
mbl.style.transition = 'all 5s ease-in-out';
// ml.style.height = '0vh';
ppm.style.display = 'flex';
// roll.style.top = '-100vh';
// blp.style.height = '0vh';
}, 2000);
});
window.addEventListener('load', function() {
var texts = document.getElementsByClassName('loading-text');
var roll = document.getElementById('loading-page');
var lta = document.getElementById('last_text');
var blp = document.getElementById('bottom-loading');
var mbl = document.getElementById('main_bottom_loading');
var ml = document.getElementById('main_load');
var ppm = document.getElementById('ows_main');
var i = 0;
var interval = setInterval(function() {
texts[i].style.opacity = '0';
i++;
if (i === texts.length) {
mbl.style.height = '0vh';
mbl.style.transition = 'all 2s ease-in-out';
ml.style.height = '0vh';
ppm.style.display = 'flex';
clearInterval(interval);
lta.className = "last_text_active";
roll.style.top = '-100vh';
blp.style.height = '0vh';
return;
}
texts[i].style.opacity = '1';
}, 400);
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.on-load-page-container {
width: 100%;
height: 100vh;
color: #fff;
position: fixed;
z-index: 999999999999;
transition: all 1s ease-in-out;
top: 0;
}
.on-load-page-container #loading-page {
display: flex;
align-items: center;
justify-content: center;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
position: relative;
transition: all 1s ease-in-out;
}
#loading-texts {
position: fixed;
text-align: center;
font-family: "Nunito", sans-serif;
font-size: 11vw;
font-weight: bold;
color: #fff;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.loading-text {
opacity: 0;
position: absolute;
}
.last_text_active {
opacity: 1 !important;
}
.bottom-loading-page {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
top: 0;
display: flex;
justify-content: center;
}
.bottom-loading-page #bottom-loading {
background: #095690;
width: 100%;
height: 800vh;
border-radius: 0 0 50% 50%;
transition: all .65s ease-in-out;
}
/* Location start */
.digital-globe-main-container {
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 9999999;
}
.digital-globe-main-container .dg-container {
display: flex;
}
.digital-globe-main-container .digital-globe {
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
#pre-load-pre {
position: absolute;
color: #252839;
-webkit-text-stroke: 0.1vw #383d52;
font-size: 5vw;
font-family: "Orbitron", sans-serif;
}
#pre-load-pre::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: #01fe87;
-webkit-text-stroke: 0.1vw #383d52;
overflow: hidden;
animation: animate 1.3s linear infinite;
}
@keyframes animate {
0%,
10%,
100% {
width: 0;
}
70%,
90% {
width: 100%;
}
}
/* Location end */<div class="on-load-page-container" id="main_load">
<div id="loading-page" class="preload">
<div class="digital-globe-main-container" id="main_globe">
<div class="container">
<div class="dg-container">
<div class="digital-globe">
<div id="loading-texts">
<p data-text="Loading..." id="pre-load-pre" class="loading-text" style="opacity:1;">
Loading...</p>
<p class="loading-text">Web Development</p>
<p class="loading-text">Website Designing</p>
<p class="loading-text">Hosting Services</p>
<p class="loading-text">Performance Marketing</p>
<p class="loading-text">Branding</p>
<p class="loading-text">Social Media Marketing</p>
<p class="loading-text">SEO</p>
<p class="loading-text">Content Writing</p>
<p id="last_text" class="loading-text">Google Ads</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-loading-page" id="main_bottom_loading">
<div id="bottom-loading"></div>
</div>
</div>