spin.js — Icône de chargement animée sans image

spin.js est une solution en Javascript (compatible avec jQuery) qui permet d’afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3. La compatibilité avec Internet Explorer en version 6, 7 et 8 est assurée grâce à WML. 

Le site propose une démonstration interactive pour tester les différentes valeurs possibles des options, comme : le nombre,  la longueur et l’épaisseur des lignes, le rayon du cercle intérieur, la couleur du loader au format #rbg or #rrggbb, la vitesse et le rendu de l’animation et l’affichage d’une ombre portée ou non.

Utilisation de spin.js

var opts = {
    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);

Navigateurs compatibles

• Chrome
• Safari 4+
• Firefox 3.5+
• IE 6,7,8,9+
• Opera 10.6+
• Mobile Safari (iOS 4)

Les plus