Mostrar GIF enquanto uma página carrega com JavaScript

Neste artigo você vai aprender a como mostrar GIF enquanto uma página carrega, de uma maneira simples e eficaz

Fala programador(a), beleza? Bora aprender mais sobre o evento de carregamento de página com JavaScript!

Primeiramente vamos criar uma div que preenche a tela do site todo, cobrindo os elementos que estão carregando

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

O HTML que vamos utilizar é:

<div id="fade-container">
    <img src="seugifaqui.gif">
</div>

E agora vamos estilizar este container para que ele fique na frente de todo o conteúdo

Veja o CSS necessário:

#fade-container {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background: #ccc;
}

img {
  text-align: center;
}

E agora vamos adicionar um evento que vai fazer esta tela desaparecer

E aí o real conteúdo site será exibido

Veja o código JavaScript:

window.addEventListener("load", function() {

    var fadeContainer = document.querySelector("#fade-container");
  
  setTimeout(function() {
  	
    	fadeContainer.style.display = "none";
    
  }, 1000);

});

Aqui neste código estamos criando um evento que dispara quando todos os elementos da tela carregarem, ou seja, o “load”

Então encapsulamos o fade container em uma variável

E depois de um segundo, com setTimeout, fazemos ele desaparecer

Como toda a página já está carregada, podemos ocultar nosso container e o gif também de loader

Conclusão

Neste artigo vimos como mostrar GIF enquanto uma página carrega

Criamos um container que fica a frente de todo o conteúdo da página e exibe um GIF

Após o carregamento completo da página nós o ocultamos e exibimos o restante do nosso conteúdo

Desta maneira, o loader automaticamente desaparece após os elementos da página serem exibidos

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube