Genera il tuo loader in tempo reale con spin.js

Da svariati anni ormai (praticamente da quando Ajax ha fatto il suo ingresso nella scena Web), capita spesso di dover utilizzare nelle interfacce degli elementi che indicano all’utente un processo o un’operazione in corso, per la serie “aspetta sto facendo qualcosa, non toccare nulla”.

In base al contesto d’uso c’è chi li chiama Loader, chi Spinner, chi Activity Indicator, ma rappresentano lo stesso pattern, precisamente il pattern Feedback Processing Page in Interaction Design.

Esempio spin.js

Esempio spin.js

spin.js è un interessante script Javascript per la generazione in real-time di indicatori di caricamento Spinner (perché chiaramente ce ne sono di tanti altri tipi, dalle semplici scritte “loading” fino alle più strane, basta dare un’occhiata su Pinterest).

Teoria a parte, sono elementi molto utili e il loro utilizzo si è perfettamente integrato anche al di fuori del web, su piattaforme native mobile (Activity Indicator su IOS, Progress Dialog su Android, Progress Bar in Windows Phone 8, etc…).

In ambito web inizialmente venivano implementate sottoforma di GIF animate o peggio incorporate in codice Flash, ma negli anni sono spuntate soluzioni alternative come questa che consentono di generare on-the-fly lo spinner desiderato (da non confondere con la miriade di generatori di loaders sparsi per la rete, che non fanno altro che far costruire all’utente il loader per poi farlo scaricare sottoforma di GIF animata).

Con spin.js, invece, non sarà usata nessuna immagine, nessun file css, non ha dipendenze da altri elementi e, udite udite, è compatibile con tutti i browser, anche con IE6!

Tra le possiblità di personalizzazione dello spinner abbiamo:

  • Numero di linee
  • Lunghezza e larghezza delle linee
  • Raggio del cerchio intorno al quale ruotano
  • Arrotondamento dei bordi
  • Velocità di rotazione
  • Persistenza dell’effetto scia
  • Verso della rotazione (orario o anti-orario)
  • Ombreggiatura

L’utilizzo è davvero semplice, basta includere il file dello script, settare le opzioni e chiamare la funzione spin

var opts = {
  lines: 11, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 34, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 46, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};

var target = document.getElementById("container");
var spinner = new Spinner(opts).spin(target);

E’ disponibile anche una versione come plugin per jQuery.

» Link allo script

1 commento

  1. Pingback: upnews.it

Rispondi