Home
Imagem-Perfil-Circulo com Efeitos

Preloader HTML CSS JS

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 type="litespeed/javascript" data-src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie.min.js"></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 type="litespeed/javascript">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:!0,autoplay:!0,path:"https://lottie.host/c8622b8c-0ad5-4b02-9840-5846c2f209a0/zzRQo3igOU.json",rendererSettings:{progressiveLoad:!1},animationData:null,renderer:'canvas',images:null,events:{complete:function(){console.log('Animation Loaded')},error:function(e){console.error(e)}}})</script> 
				
			

TESTE POPUP

Recupere seu investimento

Se você for um completo iniciante, levará em média 1 a 2 meses para assistir todas as aulas básicas. Após isso, já estará apto a conseguir seus primeiros clientes. Acredite ou não, com apenas um site, que pode ser criado em 2 ou 3 dias, você já terá a chance de recuperar seu investimento com a comunidade!