Efecto loading de imágenes con CSS

Elias Genaro — Fri, 28 Aug 2009 16:53:15 +0000

En esta ocasión paso a mostrarles una manera muy sencilla de crear un efecto loading o carga de imágenes mediante CSS, el cual nos puede ser muy útil para la presentación de ciertas imágenes dentro de nuestra web.

Debemos conseguir una imagen en formato GIF para usarla como animación para la carga. Recomiendo generar una que se ajuste a nuestro estilo mediante: Ajaxload

Crearemos una nueva clase de estilo en nuestra hoja de estilos, en mi caso la llamare loadimg, y agregamos un código similar a este:

   1:  .loadimg {

   2:      background-image: url(imagenanimadadefondo.gif);

   3:      background-repeat: no-repeat;

   4:      background-position: center center;

   5:  }

Simple, cierto? Ahora para implementar este estilo en nuestras imágenes simplemente hacemos esto dentro de nuestro código html:
```
   1:  <img src="tuimagen.jpg" border="0" class="loadimg" />
```

Ciudad Esmeralda » CSS

Efecto loading de imágenes con CSS