¡Preloader estilo Google!

Finalmente -y luego de mucho buscar y no encontrar- me decidí a crear mis propias "sprites" de preloaders tipo Google, y aquí se las dejo ... con algunas clases en LESS para ejemplo de uso.

LESS:  ---  ver http://lesscss.org

.cargando {
 -webkit-animation: animar-cargando 2.5s steps(38) infinite; /* Chrome, Safari, Opera */
 animation: animar-cargando 2.5s steps(38) infinite;
 background-size: auto 100%;
 &.amarillo{
  background-image: url(../img/cargando_sprite_Am.png);
 }
 &.azul{
  background-image: url(../img/cargando_sprite_Az.png);
 }
 &.rojo{
  background-image: url(../img/cargando_sprite_Rj.png);
 }
 &.blanco{
  background-image: url(../img/cargando_sprite_Bl.png);
 }
 &.gris{
  background-image: url(../img/cargando_sprite_Gs.png);
 }
 &.negro{
  background-image: url(../img/cargando_sprite_Ng.png);
 }
}
@t_ico:48px; // puede cambiar según se desee
.icono_48x48{
 width: @t_ico;
 height: @t_ico;
}
@-webkit-keyframes animar-cargando { /* Chrome, Safari, Opera */
    0%{
     background-position: 0px 0;
    }
    100%{
     background-position: @t_ico*-38 0;
     -webkit-transform: rotate(359deg);
    }
}
@keyframes animar-cargando {
    0%{
     background-position: 0px 0;
    }
    100%{
     background-position: @t_ico*-38 0;
     -webkit-transform: rotate(359deg);
    }
}

HTML:

<div class="cargando azul icono_48x48"></div>

Que las disfruten.
--
jjy