Para empezar déjame decirte que has tomado la mejor decisión, porque hacer esto en tu página web traerá muchos beneficios tanto en el SEO como en la apariencia de tu web, tendrá un aire más fresco y parecerá muy actual (aunque quizás no lo sea). No importa como este hecho tu sitio web porque esta opción servirá casi para cualquier CMS, o bien si tienes una web hecha con programación a medida. Tener un Spinner antes de cargar mi pagina web es sinónimo de elegancia.
Entonces, suponiendo que ya tienes elegida tu imagen con la extensión .gif serán tan solo 3 pasos a realizar para lograr con éxito nuestro Spinner antes de cargar mi pagina web.
Paso 1:
Ubicar el header de nuestra página, en el caso de que lo queramos para todo el sitio. Si estas en wordpress pegamos el siguiente código dentro del archivo header.php luego de la apertura de la etiqueta, si no usas wordpress pues simplemente lo pegas en tu header, si tienes uno diferente para cada página lo pegas en todos lo que tengas.
<div class="loader">
<img src="url-de-tu-imagen.gif" >
</div>
Si lo queremos para un página en específica pues lo pondremos dentro de nuestro contenedor general.
Paso 2:
Localizamos nuestro archivo de scripts o también podemos abrir una etiqueta <script> dentro de nuestra etiqueta <head> y allí pegamos la siguiente función:
$(window).load(function () {
$(".loader").fadeOut("slow");
});
Y por último el paso 3:
Simplemente es darle algo de estilo y fijar el ancho y la posición del .gif
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #020203; //aqui dependera del fondo de tu imagen y de tu pagina
}
.loader img {
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Y listo ya tenemos nuestro Spinner, cualquier pregunta, no dudes en hacérmela.
les dejare una web de donde pueden conseguir algunos Spinners gratis para personalizar LOADING.IO les será de gran ayuda no tendrás que diseñar uno ni tú ni nadie.
