Per fare questo è semplice, si può fare tramite CSS e jQuery.
Scegliete tra queste gif per la vostra anteprima:
Come far vedere un’immagine animata mentre la pagina web sta caricando
1. Aggiungete questo elemento subito dopo il tag <body>
<div id="loader" class="se-pre-con"></div>
2. Aggiungete questo stile CSS per mostrare l’immagine e posizionarla al centro della pagina
/* Incollate questo stile CSS al vostro file CSS */
/* Questo funziona solo con Javascript,
Se non presente, non fa vedere nulla */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
3. Adesso aggiungete questo codice jQuery per fare vedere l’immagine animata mentre la pagina sta caricando e di nasconderla quando ha finito di caricare
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
//paste this code under the head tag or in a separate js file.
// Aspetta che la finestra(window) abbia caricato tutto
$(window).load(function() {
// Facciamo sparire l'immagine quando è tutto caricato
$(".se-pre-con").fadeOut("slow");;
});
Tutto qui, adesso ricaricate la pagine dei vostri siti e vedete l’animazione
Se avete dubbi, non esitate a chiedere sotto nella sezione commenti.
Buon lavoro a tutti![:]