1 pièce(s) jointe(s)
ProgressBar.js : créer des barres de progression responsives
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:
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).
:fleche: Le site ProgressBar.js.
:fleche: D'après un article sur DailyJS.
Et vous ?
:fleche: Que pensez-vous de cet outil ?
:fleche: Quelle bibliothèque utilisez-vous pour gérer vos animations ?
