Tela de Carregamento Com Css Html e jQuery

Tela de Carregamento Com Css Html e jQuery

Neste tutorial veja como criar uma bela tela de carregamento 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 class="loader">
            
            <div id="status">&nbsp;</div>
            <div class="loading-animacao"></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.

div#preloader {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 99999;

}

.loader .title {

  color: #525866;
  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 Animação*/

:root {
  --cor-azul: #00cfd5;
  --cor-preto: #4c4c4c;
}

.loading-animacao {

  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: var(--cor-preto);
  margin-left: 20px;
  margin-bottom: 10px;
  
}

.loading-animacao:before,
.loading-animacao:after {
  
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
  
}

.loading-animacao:after {

  color: var(--cor-azul);
  transform: rotateY(70deg);
  animation-delay: .4s;

}

@keyframes rotate {

        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }

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 feita em CSS ao entrar na página.

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