17
OCT

ProgressBar.js - Créez des barres de progression design en JS et SVG

Publié le 17/10/14 à 07h57 par DJo

ProgressBar.js est une bibliothèque Javascript permettant de créer des barres de progression design grâce au SVG Path.

ProgressBar.js est une bibliothèque Javascript permettant de créer des barres de progression design grâce au SVG Path.

Vous souhaitez créer un loader original pour faire patienter vos visiteurs pendant le chargement de données ou d'un traitement ? ProgressBar.js est fait pour vous.

En effet, la lib JS permet de créer facilement vos propres loaders / progress bar design et sur des formes moins classiques.

ProgressBar.js propose de base 3 formes: En ligne, en cercle ou encore en carré, avec les fichiers SVG qui vont bien, pour ce type de rendu:

ProgressBar.js - Compteur progress bar

Mais comme la barre de progression utilise la puissance des path SVG, il vous sera possible de créer des loaders custom bien plus complexes:

ProgressBar.js - Progress bar personnalisée avec les SVG Path

Côté mise en place, voici comment créer un loader en cercle avec les options pour personnaliser le trait du chargement:

var element = document.getElementById('example-circle-container');
var circle = new ProgressBar.Circle(element, {
    color: "#FCB03C",
    strokeWidth: 2,
    fill: "#aaa"
});
circle.animate(1, function() {
    circle.animate(0);
})

Qui dit SVG dit possibilité de personnalisation des couleurs à la volée etc. Vous n'avez plus qu'à faire travailler votre imagination !

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web