Hay veces en que una pagina es muy pesada o al momento que esta cargando los elementos se ven desordenados.
Vamos a implementar un ejemplo sencillo y funcional. Usaremos la libreria "JQuery".
Implentacion
Creamos un archivo style.css y lo guardamos en la carpete csss
body {
overflow: hidden;
}
/* preloader */
#preloader {
position: fixed;
top:0; left:0;
right:0; bottom:0;
background: #000;
z-index: 100;
}
#loader {
width: 200px;
height: 200px;
position: absolute;
left:50%; top:50%;
background: url(../img/loader.gif) no-repeat center 0;
margin:-50px 0 0 -50px;
}
Creamos un archivo "js" llamado scripts.js y la ubicamos en la carpeta "js"
$(window).load(function() {
$('#preloader').fadeOut('slow');
$('body').css({'overflow':'visible'}); })
Finalmente el codigo html.