spin.js es un pequeño script que permite crear esas imágenes que uno ve a menudo cuando de indica que algo se está cargando y debemos esperar.
esta es una imagen
No parecería nada del otro mundo pero hay una diferencia sustancial; no genera imagenes sino animaciones con CSS o usando el lenguaje VML en el caso que estemos usando Internet Explorer incluyendo la versión 6 si es que aún hay dinosaurios caminando por la web.
Se integra fácilmente, basta agregar el script normal o minimizado que descargamos desde la página del autor y agregarlo antes de </head> ya sea, alojándolo en un servidor propio:
Se integra fácilmente, basta agregar el script normal o minimizado que descargamos desde la página del autor y agregarlo antes de </head> ya sea, alojándolo en un servidor propio:
<script type='text/javascript' src='URL_spin.min.js'></script>
o copiando y pegando su contenido:
<script type='text/javascript'>
//<![CDATA[
....... acá copiamos y pegamos el contenido del archivo .......
//]]>
</script>
Ahora, podemos usarlo de dos modos, o agregamos definiciones globales para controlar su aspecto:
<script>
var opts = {
lines: 15, // la cantidad de líneas
length: 36, // el tamaño de cada línea
width: 8, // el grosor de las líneas
radius: 36, // el radio del círculo
color: '#FFF', // el color en formato RGB
speed: 1, // la velocidad
trail: 60, // el efecto luminosidad
shadow: false // habilitar o deshabilitar las sombras
};
</script>
Y generamos la imagen en un DIV:
<div id="spin1"></div>
<script>new Spinner(opts).spin(document.getElementById('spin1'));</script>
O bien podemos generar imágenes individuales, estableciendo opciones diferentes:
<div id="spin2"></div>
<script>new Spinner({color:'#FF0', lines: 12}).spin(document.getElementById('spin2'));</script>
<div id="spin3"></div>
<script>
new Spinner({color:'#77DF', lines: 15, length: 20, width: 6, radius: 20, speed: 2}).spin(document.getElementById('spin3'));
</script>
Hace poco, 
Estas son dudas comunes: