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.

spinkit-loading-spin

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

 


Entradas relacionadas

Comentarios

Loading Facebook Comments ...

No Comments Yet.

Leave a Comment

No Trackbacks.