Spin.js : cr�e une animation visuelle de progression

Par Laurent | 28.08.11 14:03 | 0 commentaire(s) | programmation

Voici un javascript permettant de cr�er tr�s simplement des indicateurs de chargement, d'activit�s sur une page web par exemple....
Effectivement, sur certaines pages internet vous aurez pu constatez que lorsque un �l�ment se charge (image, application, une vid�o...) il y a souvent une image indiquant l'activit� se d�roulant...Une fois charg�e l'image disparait.

Et bien avec ce javascript Spin.js vous pourrez ais�ment cr�er un "loader" sur vos pages web sans passer par une image gif, juste gr�ce � une librairie javascript.

Comment cel� fonctionne ?
Il y a deux fa�ons d'impl�menter ce script : sans Jquery ou avec Jquery.
Voici un exemple de m�thode sans Jquery pour afficher ce loader :
1)Je t�l�charge le fichier spin.js
2)Je cr�� une page html avec un �diteur de texte et j'ajoute le code.
<html> <head> </head> <body>  <center>Exemple de loader : chargement en cours</center> <div style="margin:100px 0 0 0;" id="foo"></div>  <script type="text/javascript" src="spin.js"></script>  <script type="text/javascript"> 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); </script> </body> </html>
Sur la page de t�l�chargement de cette librairie javascript, vous trouverez des infos pour l'utiliser avec Jquery...
Tr�s pratique l'outil permettant un preview du r�sultat du loader, pour configurer le loader qui vous plaira, et ensuite reporter les valeur dans ses pages webs...

Voici une autre d�mo d'un loader...

Spin.js : cr�e une animation visuelle de progression

Commentaires

Thèmes

Tags récents

Populaires