Shefarol Soluções Web

Loading real - Voltar

Exemplo de código para mostrar uma imagem de "loading" no centro do body usando jQuery, as imagens abaixo são para simular um grande conteúdo na página e deixá-la mais pesada para melhor visualização loading.

Imagem
Imagem
Imagem
Imagem

 

Único código em HTML logo após a abertura da tag BODY
<div class="loader"></div>

 

CSS para formatar a DIV do loading
.loader{ 
    position: fixed;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    z-index: 9999;
    background: url(img/loading5.gif) center center no-repeat #FFF;
}

 

Javascript antes de fechar a tag /BODY
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">
<!-- Temporizador do loading -->
<script type="text/javascript">
    $('document').ready(function(e) {
        $(".loader").delay(1000).fadeOut("slow"); 
    });
</script>

 

Faça o download do exemplo aqui