html preloader con gif animata

Posted 2021-05-11

//PRELOADER
//funzione per nascondere il preloader al caricamento della pagina
$(window).on("load", function () {
   //nascondo gif animata
   $("#img-preloader").fadeOut('fast');
   //nascondo il div con fondo bianco
   $("#preloader").fadeOut('slow');
});
//FINE PRELOADER

/* PREOLADER */
#preloader {
   /* imposto lo sfondo bianco e fisso a tutta pagina */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000000001;
    width: 100%;
    height: 100%;
    background: #fff;
}
#img-preloader {
   /* imposto la gif animata al centro dello schermo */
    position: absolute;
    height: 32px;
    width: auto;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

<!-- PRELOADER  #PRELOADER01 -->
<div id="preloader">
  <img id="img-preloader" src="resources/preloader/preloader_10.gif">
</div>