Animaciones de carga sencillas con CSS

SpinKit contiene algunas animaciones de carga animadas muy sencillas pero el mismo tiempo, impresionantes con CSS. Utiliza animaciones CSS para crear animaciones fluidas y fáciles de personalizar. No es un recurso que funciona en todos los navegadores. Por lo que para un sitio con usuarios que utilizan mayormente IE9 o versiones inferiores de IE, se puede generar un archivo GIF, para mostrar en lugar de la animación CSS.

El uso es muy sencillo. Por un lado en el HTML establecemos el div o divs necesarios:

<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>

y por último el CSS:

.spinner {
 width: 40px;
 height: 40px;
position: relative;
 margin: 100px auto;
}
.double-bounce1, .double-bounce2 {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-color: #333;
 opacity: 0.6;
 position: absolute;
 top: 0;
 left: 0;

 -webkit-animation: bounce 2.0s infinite ease-in-out;
 animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
 0%, 100% { -webkit-transform: scale(0.0) }
 50% { -webkit-transform: scale(1.0) }
}
@keyframes bounce {
 0%, 100% { 
 transform: scale(0.0);
 -webkit-transform: scale(0.0);
 } 50% { 
 transform: scale(1.0);
 -webkit-transform: scale(1.0);
 }
}

Ver ejemplos y código en la web de SpinKiy