spin.js: Script para generar Imágenes de carga

JMiur [E]

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:

<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>