¿Cómo usar spin.js en mi página web?

Spin.js, es un plugin basado en JavaScript que podemos utilizar cuando estamos haciendo alguna petición ajax, y necesitamos que mientras los datos se están cargando, tener un loader, como por ejemplo una imagen que aparezca mientras recibo los datos.

Este plugin nos facilita mucho el trabajo, ya que por una parte no es necesario tener jQuery en nuestra web, y que podemos cargarlo donde queramos.

Podemos configurar este plugin como queramos, tan solo tenemos que cambiar los parámetros para cambiarle la forma al loader.

var opts = {
  lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
var target = document.getElementById('foo')
var spinner = new Spinner(opts).spin(target);

La forma más fácil de utilizarlo es el de crearnos dentro de la vista o página que contenga el código HTML, una etiqueta que contenga el id “foo”.

Ese “id” lo podemos cambiar por el que queramos, siempre y cuando en el código JS, cambiemos también el nombre.

<div id="foo"></div>

Dentro del código ajax, cuando se están enviando los datos, habría que poner ese código. Ejemplo:

beforeSend: function (e){
$('#ajaxLoader).show();
}

Tienes más información en la web oficial > http://fgnass.github.io/spin.js/ 

Esperamos haberte ayudado y no olvides valorar la respuesta ;))

Un Saludo,

Presupuesto Web Gratis de Crear tu Página Web con WordPress