Como fazer uma tela de loading antes de abrir o site

Como fazer uma tela de loading antes de abrir o site

Neste tutorial vamos criar uma tela de loading antes de abrir o site com Css Html e jquery.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tag: <div> e a tag <span> para inserirmos os itens e classes na <div>.

Essas tags usaremos para criar a nossa Tela de carregamento com html e css.

Vamos Adicionar o HTML

    <!--PreLoader-->
    <div id="preloader">
            
        <div id="status">&nbsp;</div>
        <div class="loader">

                <div class="loader-pacman pacman"></div>
                <span class="title">Carregando...</span>

        </div>

    </div>
    <!--PreLoader-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nossa Tela de animada com carregamento de pacman.

div#preloader {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 99999;

}

.loader .title {

  color: var(--cor-branco);
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: lighter;
  text-align: center;

}

.loader {

  position: absolute;
  top: 50%;
  left: 50%;
  margin-top:-50px; 
  margin-left:-50px;

}

/*Loading*/

:root {
  --cor-amarelo: #ffe300;
  --cor-branco: #ffffff;
}

.loader-pacman {
  
  display: block;
  margin-left: 33px;
  margin-bottom: 20px;

}

.loader-pacman::before, .loader-pacman::after {
  content: "";
  position: absolute;
}


.pacman {
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--cor-amarelo);
  -webkit-animation-name: pacmandot;
          animation-name: pacmandot;
  transform: translateX(14px);
}
.pacman::before, .pacman::after {
  border-radius: 50%;
  border: 14px solid var(--cor-amarelo);
  border-right-color: transparent;
  top: -12px;
  left: -24px;
}
.pacman, .pacman::before, .pacman::after {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.pacman::before {
  -webkit-animation-name: upperJaw;
          animation-name: upperJaw;
}
.pacman::after {
  -webkit-animation-name: lowerJaw;
          animation-name: lowerJaw;
}

@-webkit-keyframes pacmandot {
  0%, 50% {
    background: var(--cor-branco);
  }
  51%, 100% {
    background: none;
  }
  0%, 100% {
    transform: translateX(19px);
  }
  50% {
    transform: translateX(14px);
  }
}

@keyframes pacmandot {
  0%, 50% {
    background: var(--cor-branco);
  }
  51%, 100% {
    background: none;
  }
  0%, 100% {
    transform: translateX(19px);
  }
  50% {
    transform: translateX(14px);
  }
}
@-webkit-keyframes upperJaw {
  50% {
    transform: rotate(50deg) translate(2px, -2px);
  }
}
@keyframes upperJaw {
  50% {
    transform: rotate(50deg) translate(2px, -2px);
  }
}
@-webkit-keyframes lowerJaw {
  50% {
    transform: rotate(-50deg) translate(2px, 2px);
  }
}
@keyframes lowerJaw {
  50% {
    transform: rotate(-50deg) translate(2px, 2px);
  }
}

Agora vamos adicionar o Script

link os arquivos veja o exemplo no código.

obs: você pode baixar os arquivos logo abaixo.

<script src="js/jquery.js"></script>
<script src="js/script.js"></script>

veja o script que será responsável de chamar a animação de carregamento pacman. feita em html CSS.

script.js

$(window).load(function() { // Garante que todo o site seja carregado
  $('#status').fadeOut(); // primeiro desaparecerá a animação de carregamento
  $('#preloader').delay(350).fadeOut('slow'); // desaparecerá o DIV branco que cobre o site.
  $('body').delay(350).css({'overflow':'visible'});
})

Combinando as Três seções acima Html, Css e jQuery temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando