Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

ProgressBar.js : créer des barres de progression responsives
Grâce à cette bibliothèque JavaScript paramétrable

Le , par vermine

58PARTAGES

2  0 
ProgressBar.js : créer des barres de progression responsives
Grâce à cette bibliothèque JavaScript paramétrable

ProgressBar est une bibliothèque JavaScript pour créer des barres de progression responsives.
Elle utilise des chemins SVG animés, donc les résultats sont plutôt sympas.


Il est facile de créer des barres de progression de forme arbitraire. Cette bibliothèque fournit quelques formes intégrées comme la ligne, le cercle ou le carré, mais vous pouvez également créer vos propres barres de progression avec n'importe quel éditeur graphique vectoriel.

Elle prend en charge les principaux navigateurs y compris IE9 +.

Bien entendu, vous pouvez paramétrer la barre par exemple en jouant sur la couleur :

Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
var element = document.getElementById('example-line-container'); 
  
var line = new ProgressBar.Line(element, { 
  color: '#FCB03C', 
  trailColor: '#aaa' 
}); 
  
line.animate(1, function() { 
  line.animate(0); 
});

Vous pouvez également :
  • personnaliser l'animation ;
  • ajouter un numéro pour faire un effet de chronomètre ;
  • utiliser des animations SVG complexes ;
  • etc.


ProgressBar.js utilise Shifty, un moteur d'animation (tween).

Le site ProgressBar.js.
D'après un article sur DailyJS.

Et vous ?

Que pensez-vous de cet outil ?
Quelle bibliothèque utilisez-vous pour gérer vos animations ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de none61
Membre à l'essai https://www.developpez.com
Le 25/10/2016 à 10:35
Bonjour, j'ai suivi votre article concernant les barres de progression s'appuyant sur progressbar.js

Je voulais savoir si vous arriviez a faire fonctionner plusieurs progressbar sur la même page html car si aujourd'hui j'arrive a faire fonctionner correctement une barre, dés que je passe a 2 , ça ne fonctionne plus.... Le but pour moi étant d'en afficher environ 4 ...

Merci de votre réponse
0  0 
Avatar de vermine
Responsable Jeux-Concours https://www.developpez.com
Le 02/11/2016 à 9:02
Il me semble que c'est possible. Vérifiez bien le nommage des divers éléments afin qu'ils n'entrent pas en conflit.
0  0 
Avatar de NoSmoking
Modérateur https://www.developpez.com
Le 05/11/2016 à 15:10
Bonjour,
Citation Envoyé par vermine
Il me semble que c'est possible.
Tout à fait

Citation Envoyé par none61
...ça ne fonctionne plus.... Le but pour moi étant d'en afficher environ 4 ...
montre nous comment tu t'y prends pour déclarer tes « progressBar »
0  0