Buenas noches, hoy quise ver cómo implementar un pre-loader en un WebSite que me ocultará la carga del mismo, y por último que se desapareciese con algún efecto que le diera un poco más de estilo a la página con HTML y jQuery.

1. En primer lugar debemos crear un div o layer después de la equiqueta de apertura Body.


<body>

<div id="loader">Cargando...</div>

</body>

2. Ahora aplicamos los estilos CSS al layer y el JavaScript dentro de las etiquetas <head></head>.


<head>


<style>

#loader{

position:absolute;/*agregamos una posición absoluta para que nos permita mover la capa en el espacio del navegador*/

top:0;/*posicionamiento en Y */

left:0;/*pocisionamiento en X*/

z-index:9999; /* Le asignamos la pocisión más alta en el DOM */

background-color:#ffffff; /* le asignamos un color de fondo */

width:100%; /* maximo ancho de la pantalla */

height:100%; /* maxima altura de la pantalla */

display:block; /* mostramos el layer */

}

</style>

3. En este paso agregamos la sentencia Jquery dentro de <script></script>.


<script>

jQuery(document).ready(function(){

jQuery("#loader").fadeOut("slow");

});

</script>

El anterior código con jQuery nos va a permitir darle una salida visual al layer como desvanecimiento.


</head>

Bueno a todos gracias, nos veremos pronto…