You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages
body:not(.homepage) #loader-container {
display: none !important;
}
Use this new code, replace Pixabay with your background image url
<div class="splash-wrapper" id="loader-container">
<!-- Lottie animation player -->
<img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>
<style>
div#loader-container img {
max-width:500px;
position: relative;
}
/* Loader animation styles */
.splash-wrapper {
display: none; /* Initially hidden */
position: fixed;
z-index: 9999;
background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 0.65s;
animation-delay:10s;
}
@keyframes slideOut {
from {
margin-left: 0vw;
}
to {
margin-left: -100vw;
}
}
@media screen and (max-width:767px) {
div#loader-container {
background-size: cover;
}
div#loader-container img {
max-width: 300px;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
setTimeout(function(){
$('.splash-wrapper img').fadeIn(500);
}, 3000);
});
</script>
matt_thewalkcreative reacted to tuanphan in Create page loading/page transition effect
