Construire des barres de progression personnalisées avec ProgressBar.js
Barres de progression sont largement connus par la plupart des utilisateurs sur le Web. Pour les développeurs, c'est souvent un processus compliqué à créer une barre de progression à partir de zéro. Mais avec ProgressBar.js tu n'es pas obligé!
Cette bibliothèque open source gratuite n'a pas de dépendances et supporte tous les principaux navigateurs, y compris IE9+.
Par défaut, vous pouvez utiliser un simple bar, ou tu peux choisir parmi quelques formes de base, tel que:
- Une seule ligne
- Demi-cercle
- Cercle complet
- Carré
- Triangle
Vous pouvez également concevoir vos propres formes personnalisées comme un cœur, un nuage ou même le lettrage du logo de votre site Web. Certes, cela demandera quelques efforts mais le résultat final peut être incroyable.
La bibliothèque fonctionne sur les chemins SVG, alors si tu peux construire une forme esquissée en utilisant le balisage SVG, vous pouvez animer avec cette bibliothèque de barre de progression.
Les animations peuvent aussi inclure du texte ou avoir des modèles de démarrage / d'arrêt personnalisés. L’API complète a plus de détails avec options / callbacks que vous pouvez parcourir à votre guise.
ProgressBar.js a également un petit guide d'installation où vous pouvez télécharger et configurer le script utiliser Bower, npm ou la page GitHub plus simplifiée.
Et si vous construisez quelque chose de cool, vous pouvez soumettez votre code dans le dépôt GitHub. Le créateur du projet, Kimmo Brunfeldt a une question ouverte de GitHub où vous pouvez soumettre des designs personnalisés être inclus dans la bibliothèque.
Vous pouvez ajouter des barres de progression animées pour inscrire des pages, télécharger des champs ou sur n'importe quelle page Web en tant que préchargeur. Les options ne sont limitées que par comment détaillé vous êtes prêt à obtenir.
Par exemple, j'aime bien la démo de l'indicateur de force du mot de passe, car sert un but réel et profite à l'expérience utilisateur. Cet exemple vient emballé avec le plugin, vous pouvez donc le copier et le modifier à votre guise.
À voir plus d'exemples, consultez la page d'accueil de ProgressBar.js ou jetez un coup d'œil à ce violon qui fait une démonstration du coeur.
