Mostrar y ocultar una imagen de carga con css

Es muy importante mostrar información al usuario sobre lo que está pasando con la página web que está visualizando.

De esta forma es conveniente, por ejemplo, mostrar una pequeña imagen cerca del botón de búsqueda cuando el usuario está esperando a que se devuelvan los resultados.

Hay muchas posibles imagenes que se pueden usar, la que usamos en nuestro ejemplo es una que hemos descargado de Ajaxload - Ajax loading gif generator.

Esta pequeña "ruedecita" se situa en nuestra página mediante el elemento:

<img id="buscando" src="images/ajax-loader.gif" />


Este elemento tiene un estilo css asociado que inicialmente no lo muestra (el elemento está oculto).

#buscando {
    position: absolute;
    left: 790px;
    top: 7px;
    visibility: hidden;
}

Posteriormente, mediante un javascript muy simple, lo mostramos y ocultamos a nuestra conveniencia para informar al usuario de que la página está realizando alguna acción y todavía no ha terminado.

Para mostrar:

document.getElementById("buscando").style.visibility = "visible";


Para ocultar:

document.getElementById("buscando").style.visibility = "hidden";


Es un efecto simple y da una muy buena impresión al usuario de nuestra web.