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

  • Pas d’images,
  • Pas de dépendances CSS,
  • Indépendant de la résolution,
  • Poids inférieur à un GIF animé,
  • Licence MIT.