Spin.js, une icône de chargement animée en JavaScript et CSS3

13 septembre 2011

Spin.js est une librairie JavaScript qui permet d’afficher une icône de chargement animée (aussi appelée « loader ») grâce à quelques propriétés CSS3. C’est une solution efficace pour montrer que des éléments sont en train d’être chargés, et le tout sans utiliser d’image !

Quelques caractéristiques

Le script est entièrement configurable grâce à plusieurs options qui donnent la possibilité de personnaliser l’indicateur de chargement. Celui-ci, qui n’utilise aucune image, est chargé en JavaScript et fonctionne uniquement avec des propriétés CSS, notamment CSS3 (transform, border-radius ou encore box-shadow). Ainsi, on peut paramétrer la couleur, les dimensions, le nombre de lignes, ou encore la vitesse de rotation. L’outil ne dépend pas de jQuery mais il supporte le framework et peut être utiliser sous forme de plugin.

Mise en place du script

La méthode spin() crée les éléments HTML nécessaires à la génération de l’icône de chargement puis applique l’animation. Pour placer l’outil où vous en avez envie, vous pouvez passer l’ID d’un élément HTML en paramètre via la variable target. Le script va alors ajouté le « loader », centré horizontalement et verticalement, en tant que premier enfant de l’élément sélectionné.

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);

Il est également possible de positionner votre « loader » manuellement en appelant la méthode spin() sans paramètre et en utilisant la propriété el. L’élément retourné est une DIV avec la propriété CSS « position:relative » et l’icône est placée dans le coin gauche supérieur.

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

Puis pour cacher l’icône de chargement, il faut appeler la méthode stop() qui permet de stopper l’animation et supprimer les éléments HTML du DOM. Il est possible de ré-activer Spin.js en appelant toujours la méthode spin().

Support des navigateurs

Côté compatibilité, c’est parfait puisque l’icône de chargement fonctionne partout ! La compatibilité avec Internet Explorer en version 6, 7 et 8 est assurée grâce à VML.

  • Chrome
  • Safari 3.2+
  • Firefox 3.5+
  • IE 6,7,8,9
  • Opera 10.6+
  • Mobile Safari (iOS 3.1+)
  • Android 2.3+

Spin.js est donc une solution idéale pour mettre en place un indicateur de chargement sous forme d’icône, par exemple dans le cas d’une requête AJAX.

Requis : jQuery, navigateur compatible CSS3
Démonstration : http://fgnass.github.com/spin.js/
Licence : MIT

Commentaires

  • Welcominh

    Script très pratique, je vais sûrement l’utiliser sur mon site.

  • Bite

    C’est exactement ce que je cherchais ! Merci pour le partage.

  • chikken

    J’ai un problème avec, puisqu’il m’affiche bien le loader quand je veux, et centré, mais lorsque que la div dans laquelle il se trouve change de taille, le loader ne suit pas, je ne vois pas comment faire, une idée ?