comparte el articulo 

Utilizar un loading o imagen de carga con CSS

Actualizado el 05/10/2013 < > 3 Cometarios

Resumen: Como usar una imagen animada de carga para amenizar la espera de tus usuarios.

No hay nada mejor que hacer saber al usuario cuando está esperando algo para no impacientarlo, y aunque una animación simple no le informa del progreso exacto o del tiempo que tendrá que esperar, muchas veces es suficiente para retener al usuario en tu página y evitar que se marche pensando que el sitio web no funcionaba.

Una manera muy simple de indicar que una imagen o cualquier otro elemento aun no se cargó es colocar en su lugar una imagen de fondo animada que nos de la sensacion de que ese elemento está descargandose.

Para ello aquí un truco muy sencillo, poner de fondo del elemento una imagen animada muy ligera, para que no añada un exceso de carga a la página web, pero que indique al usuario que la página sigue funcionando.

El código necesario para hacer el loading es el siguiente:

img {
  background:transparent url(images/ajaxload.gif) center no-repeat;
  }

Con este código la imagen animada (imagen de fondo) se mostraría en todas las imágenes que estén cargandose en tu web.
Eso es, así de sencillo, con este simple código a todas las imagenes del sitio le colocamos nuestra animación de fondo. Cuando la imagen principal se haya cargado dejará de ser visible, mientras se esté descargando le damos al usuario mayor sensación de continuidad, pareciendo más evidente que la página sigue activa.

Pero como esto puede resultar innecesario usarlo en todas las imágenes de una página web, ya que hay muchas imágenes pequeñas que cargan rápidamente, otra forma es crear una clase CSS que se podrá utilizar en las imagenes grandes (muy pesadas) que usemos en nuestra web, y para las que sí resulta útil añadir un efecto como este puesto que es posible que el usuario tenga que esperar unos segundos para ver la imagen:

.precarga {
    background:transparent url(images/ajaxload.gif) center no-repeat;
 }

Y para que la imagen de fondo aparece como la queremos, tenemos que añadir la anchura (width) y la altura (height) de las propiedades de la imagen, mediante estilos CSS en un div que rodee la imagen:

<div style="width: 140px; height: 120px" class="precarga">
	<a href="tp://www.paginaweb.com/>
		<img src="http://www.paginaweb.com/" alt="texto descriptivo" border="0" />
	</a>
</div>

Para conseguir la imagen de fondo a mostrar mientras se carga la imagen de la web, hay páginas muy buenas que nos hacen el trabajo:

Ajax load
  • Ajax Load: esta herramienta online te permite crear imagenes de carga animadas, ya sea para el tema que estamos tratando o para el uso que se te ocurra. Te permite personalizar los colores y el tipo de animación. Muy recomendable. Un ejemplo:
    imagen de carga animada
  • Preloaders: esta otra herramienta hace lo mismo que la anterior, solo que te crea imágenes animadas en 3D. También puedes personalizar colores y tipo de animación. Un ejemplo:
    imagen de carga animada en 3D

También puedes usar Ajax para lograr este tipo de efecto.

Publicado el 18/11/2009, última actualización 05/10/2013.

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

Autor: Verónica Milán

URL: Utilizar un loading o imagen de carga con CSS

Añadir Comentario (Subir al texto)

3 Cometarios

  1. Miguel

    Muchas gracias!!! llevo como 2 horas buscando en google y no encontraba nada, hasta que llegue aquí y con esa linea de css he solucionado mi problema…estupendo tutorial!!!

    Graciassss

    Jueves, 17 de noviembre 2011

  2. coudlain

    Pedazo de articulo si señor, eres un fenomeno muchas gracias !!

    Miércoles, 4 de julio 2012

  3. alejandro sanchez

    Gracias pro el tutorial, programo mi web con adobe muse, donde puedo colocar el codigo para que funcione, y en el caso de mis animaciones creo mi pestaña de html pero donde coloco que encabezado y final le doy para que funcione. Gracias por tu ayuda.

    Lunes, 6 de enero 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras