Preloader 1 (Utilizado no CodeSnippets)
HTML
function adicionar_preloader_html() {
echo '<div id="preloader">
<img src="https://tutoriais.gustavocampelo.com.br/wp-content/uploads/2024/06/Logotipo.png" alt="Carregando...">
</div>';
}
add_action('wp_body_open', 'adicionar_preloader_html');
JS
function adicionar_preloader_js() {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.add("loading");
});
window.addEventListener("load", function() {
document.body.classList.remove("loading");
document.body.classList.add("loaded");
document.getElementById('preloader').style.display = 'none';
});
</script>
<?php
}
add_action('wp_footer', 'adicionar_preloader_js');
CSS
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height:100vh
}
#preloader img {
width: 60px;
}
body.loading {
overflow: hidden;
}
body.loaded #preloader {
display: none;
}
html, body{
margin: 0px !important;
padding: 0px !important;
overflow-x:hidden !important
}
Preloader 2 (Utilizado no Elementor Code - Body End)
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie.min.js" type="text/javascript"></script>
<style>
#loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
transition: opacity 0.3s;
}
div{
z-index:999;
}
#lottie-loader{
width: 1500px;
}
</style>
<div id="loader">
<div id="lottie-loader"></div>
</div>
<script>
window.addEventListener("load", function() {
const loader = document.getElementById("loader");
setTimeout(function() {
loader.style.opacity = "0";
setTimeout(function() {
loader.style.display = "none";
}, 6000);
}, 6000);
});
lottie.loadAnimation({
container: document.getElementById("lottie-loader"),
renderer: "svg",
loop: true,
autoplay: true,
path: "https://lottie.host/c8622b8c-0ad5-4b02-9840-5846c2f209a0/zzRQo3igOU.json",
rendererSettings: {
progressiveLoad: false
},
animationData: null,
renderer: 'canvas',
images: null,
events: {
complete: function() {console.log('Animation Loaded')},
error: function(e) {console.error(e)}
}
});
</script>
