Spin.js: Creare un loading spinner tramite JavaScript
Link sponsorizzati
Spin.js
Molto tempo fa (sono passati due anni ormai) parlai di alcuni siti nei quali è possibile prelevare delle gif animate che si usano per notificare all’utente il caricamento della pagina in modo asincrono (attraverso Ajax). Sono passati due anni, le specifiche CSS3 e HTML5 all’epoca erano supportate da pochi browser e in modo spartano.
Ciononostante, a due anni di distanza, molti browser ormai hanno implementato – chi più chi meno – le specifiche (ancora in corso di definizione) dei futuri standard per il web e molti programmatori cominciano già ad utilizzarle.
Link sponsorizzati
Questo è il caso della libreria spin.js che, appunto, utilizza i CSS3 per creare uno spinner che notifica il caricamento della pagina (cosa che in precedenza veniva fatta con una gif animata).
Spin.js utilizza la regola @keyframes dei CSS3 per applicare l’animazione – ad eccezione di Internet Explorer per il quale viene utilizzato il VML. La libreria permette di customizzare molto il comportamento dello spinner dando la possibilità di modificare molti parametri tra cui: velocità, larghezza, numero di linee dello spinner, raggio ecc ecc.
Questo un esempio d’uso:
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 5, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rbg or #rrggbb
speed: 1, // Rounds per second
trail: 100, // Afterglow percentage
shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
Spin.js è rilasciato con licenza MIT, supporta tutti i browser moderni e le vecchie versioni di IE.
Questo è il sito ufficiale dove troverete più info.
Link sponsorizzati
