Como poner un Loading en HTML

  • 2

Es realmente muy sencillo los pasos son lo siguientes:

1.- Javascript .- El siguiente código deberás de ponerlo antes del </HEAD>

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

2.- Inserción.- Una vez ingresado el script ahora deberás poner el DIV para que se luzca la imagen.

<div id='imgLOAD' style="TEXT-ALIGN: center">
<b>Cargando</b>
<img alt='LOADING' height='50' src='Tu imagen.gif' width='50'/>
</div>

Este DIV lo puedes introducir en cualquier parte de la página, además de que puedes personalizarlo (Solo lo que esta con azul), puedes cambiar el valor de height (altura) y width (ancho) y ya sea que quieras eliminar el <b>Cargando</b> o ponerle <h1></h1> o lo que quieras.

Les dejo la siguiente imagen de Loading que yo ocupo, si quieren otras pueden entrar a las siguientes páginas.

preloaders ajaxload loadinfo webscriptlab chimply mentalized sanbaldo

2 comentarios:

Daniel S. Zempoaltecatl dijo...

Hola soy Carlos, gracias por compartir tu código, solo una pregunta sobre el código, ¿no te ha dado problemas con el SEO?

Daniel S. Zempoaltecatl dijo...

Ningún problema registrado, hasta ahora ;)