Utilizar un loading o imagen de carga con CSS
(4 votos, promedio: 4,75 de 5)
Cargando...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 sensación de que ese elemento está descargándose.
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 CSS 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 cargándose en tu web. Aunque te falta un detalle, necesitas la imagen .gif del ejemplo. Sigue leyendo, al final del artículo te explico de dónde obtenerla.
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 más recomendable es crear una clase CSS que se podrá utilizar en las imágenes 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 aparezca 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="https://www.paginaweb.com/">
<img src="https://www.paginaweb.com/imagen.jpg" alt="texto descriptivo" />
</a>
</div>Para conseguir la imagen .gif de fondo a mostrar mientras se carga la imagen de la web, hay páginas muy buenas que nos hacen el trabajo:
- 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.
- 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.
Para comprobar que el ejemplo funciona, puedes quitar la imagen y ver si tu loader se visualiza. Es decir, quitar este trozo de código:
<img src="https://www.paginaweb.com/imagen.jpg" alt="texto descriptivo" />
Y comprobar que tu loader se visualice en su lugar.
15 respuestas
Hola, gracias ante todo. Quería preguntar si sabes si existe algún plugin para wordpress que realize esta función. Gracias.
Hola Julio,
No, la verdad que no lo conozco, pero es un código muy sencillo de implementar en tus CSS, no veo la necesidad de usar un plugin para esto.
Anímate a intentarlo.
Saludos!
Aqui tienes unos cuantos plugin de wordpress que pueden ayudarte:
https://es.wordpress.org/plugins/tags/loading/
Ingreso el código en style, ¿pero dónde coloco la imagen que generé en Ajax load?
¿Alguno me puede ayudar por favor? :/
Hola Frank,
La imagen la tienes que subir a tu servidor a la carpeta que tu elijas para guardar tus imágenes, y luego en el fichero CSS, tienes que definir la ruta de tu imagen.
Puede que este artículo te ayude a añadir la imagen: https://www.lawebera.es/como-hacer/ejemplos-html-xhml/anadir-imagenes-web.php
Saludos!
Muy interesante y bien explicado.
Me gustaría consultarte si esto funcionaría utilizando wordpress, si es así en donde debería agregar el código.
Hola Rafa,
Me alegra que te guste y gracias por pasarte a comentar.
Respecto a tu pregunta, muchos temas incluyen este tipo de recursos, pero si el tuyo no lo trae, la primera parte tal cual está explicada aquí puedes añadirla a tus hojas de estilo.
Saludos.
Hola! Tengo una duda super grande,
Estoy haciendo un diseño en bloc de notas, pero lo que se me ha complicado es hacer un botón que al dar click me salga un gif de carga, o un simple loading, pero no he encontrado :/ ayuda plis :(
Hice el botón con el código response. Write(“…”
Hola Leslie,
No tenemos ningún ejemplo sobre lo que comentas en LaWebera, pero he encontrado un ejemplo en Code Pen, espero que te ayude:
https://codepen.io/TimLamber/pen/wBMmYq
Tienes que usar CSS (y adaptarlo a tu web) y algo de JavaScript.
Un saludo.
Hola, intento hacer ese ejercicio pero no me sale. ¿Alguien podría compartirme su código para tener una idea?.
Hola Esteban,
¿Qué problema tienes exactamente? porque el código es el que tienes en el ejemplo. Por un lado el css (el primer bloque) y por otro el html (el último bloque). Y luego tienes que crear un gif animado de carga en las webs que enlazo en el artículo, para usarlo en tu web como loader.
Lo he modificado un poco a ver si se entiende mejor.
Un saludo.
Es perfecto, justo lo que necesitaba!!!
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.
Pedazo de articulo sí señor, eres un fenómeno muchas gracias !!
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