- Página Inicial
- Jquery
- Tela de Carregamento Com Css Html e jQuery
- Voltar
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"> </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
Publicado por: Loop Nerd
1.924 Visualizações
Deixe um comentário