Share
Rien ne se passe instantanément sur le Web. La seule différence réside dans le temps nécessaire à la réalisation d'un processus. Certains processus peuvent se produire en quelques millisecondes, alors que d'autres peuvent prendre plusieurs secondes ou minutes. Par exemple, vous modifiez peut-être une très grande image téléchargée par vos utilisateurs et ce processus peut prendre un certain temps. Dans ce cas, il est judicieux d'informer les visiteurs que le site Web n'est pas bloqué quelque part mais qu'il travaille réellement sur votre image et qu'il progresse..
L’utilisation des barres de progression est l’un des moyens les plus courants de montrer aux lecteurs l’état d’avancement d’un processus. Dans ce didacticiel, vous apprendrez à utiliser la bibliothèque ProgressBar.js pour créer différentes barres de progression avec des formes simples et complexes..
Une fois que vous avez inclus la bibliothèque dans votre projet, il est facile de créer une barre de progression à l'aide de cette bibliothèque. ProgressBar.js est pris en charge par tous les principaux navigateurs, y compris IE9 +, ce qui signifie que vous pouvez l’utiliser avec n’importe quel site Web que vous créez. Vous pouvez obtenir la dernière version de la bibliothèque auprès de GitHub ou utiliser directement un lien CDN pour l’ajouter à votre projet..
Pour éviter tout comportement inattendu, veuillez vous assurer que le conteneur de la barre de progression a le même rapport de format que la barre de progression. Dans le cas d’un cercle, les proportions du conteneur devraient être 1: 1 parce que la largeur sera égale à la hauteur. Dans le cas d'un demi-cercle, le rapport d'aspect du conteneur doit être 2: 1 parce que la largeur sera le double de la hauteur. De même, dans le cas d’une ligne simple, le conteneur doit avoir un rapport de forme de 100: largeur de trait pour la ligne.
Lorsque vous créez des barres de progression avec une ligne, un cercle ou un demi-cercle, vous pouvez simplement utiliser les options ProgressBar.Shape () méthode pour créer la barre de progression. Dans ce cas, le Forme peut être un Cercle, Ligne, ou Demi-cercle. Vous pouvez transmettre deux paramètres au Forme() méthode. Le premier paramètre est un sélecteur ou un nœud DOM pour identifier le conteneur de la barre de progression. Le deuxième paramètre est un objet avec des paires clé-valeur qui déterminent l'apparence de la barre de progression..
Vous pouvez spécifier la couleur de la barre de progression à l’aide des touches Couleur propriété. Toute barre de progression que vous créez aura une couleur gris foncé par défaut. L’épaisseur de la barre de progression peut être spécifiée à l’aide des touches largeur du trait propriété. N'oubliez pas que la largeur ici n'est pas en pixels mais en pourcentage de la taille de la toile. Par exemple, si le canevas a une largeur de 200 px, un largeur du trait la valeur de 5 créera une ligne de 10 pixels d'épaisseur.
Outre la barre de progression principale, la bibliothèque vous permet également de tracer une dernière ligne qui indiquera aux lecteurs le chemin sur lequel la barre de progression se déplacera. La couleur de la trace peut être spécifiée à l’aide des touches trailColor propriété, et sa largeur peut être spécifiée en utilisant le trailWidth propriété. Juste comme largeur du trait, la trailWidth propriété calcule également la largeur en pourcentage.
Le temps total mis par la barre de progression pour passer de son état initial à son état final peut être spécifié à l'aide de la touche durée propriété. Par défaut, une barre de progression termine son animation en 800 millisecondes..
Vous pouvez utiliser le assouplissement propriété pour spécifier le déplacement d’une barre de progression pendant l’animation. Toutes les barres de progression se déplacent avec un linéaire vitesse par défaut. Pour rendre l’animation plus attrayante, vous pouvez définir cette valeur sur autre chose, par exemple facilité dans, easyOut, easyInOut, ou rebondir.
Après avoir spécifié les valeurs de paramètre initiales, vous pouvez animer les barres de progression à l’aide du bouton animer() méthode. Ce paramètre accepte trois paramètres. Le premier paramètre est le montant jusqu'à lequel vous souhaitez animer la ligne de progression. Les deux autres paramètres sont facultatifs. Le second paramètre peut être utilisé pour remplacer les valeurs de propriété d'animation que vous avez définies lors de l'initialisation. Le troisième paramètre est une fonction de rappel permettant de faire autre chose une fois l'animation terminée..
Dans l'exemple suivant, j'ai créé trois barres de progression différentes en utilisant toutes les propriétés décrites précédemment..
Accentsconagua
var lineBar = new ProgressBar.Line ('# line-container', color: 'orange', strokeWidth: 2, trailWidth: 0.5); lineBar.animate (1, duration: 1000); var circleBar = new ProgressBar.Circle ('# conteneur_cercle', couleur: 'blanc', épaisseur du contour: 2, trailWidth: 10, trailColor: 'noir', easing: 'aisanceInOut'); circleBar.animate (0,75, durée: 1500); var semiBar = new ProgressBar.SemiCircle ('# semi-conteneur', color: 'violet', strokeWidth: 2, trailWidth: 0.5, soulagement: 'bounce'); semiBar.animate (1, duration: 3000);La seule chose qui change avec l'animation des barres de progression dans l'exemple ci-dessus est leur longueur. Cependant, ProgressBar.js vous permet également de modifier d’autres attributs physiques tels que la largeur et la couleur de la ligne de contour. Dans ce cas, vous devrez spécifier les valeurs initiales de la barre de progression à l’intérieur du de paramètre et les valeurs finales à l'intérieur du à paramètre lors de l'initialisation des barres de progression.
Vous pouvez également demander à la bibliothèque de créer un élément texte d'accompagnement avec la barre de progression pour afficher des informations textuelles à vos utilisateurs. Le texte peut être n'importe quoi, d'une valeur statique à une valeur numérique indiquant la progression de l'animation. le texte paramètre acceptera un objet comme valeur.
Cet objet peut avoir un valeur paramètre permettant de spécifier le texte initial à afficher à l'intérieur de l'élément. Vous pouvez également fournir un nom de classe à ajouter à l'élément de texte à l'aide du bouton nom du cours paramètre. Si vous souhaitez appliquer des styles en ligne à l’élément de texte, vous pouvez tous les spécifier en tant que valeur du paramètre. style paramètre. Tous les styles par défaut peuvent être supprimés en définissant la valeur de style à nul. Il est important de se rappeler que les valeurs par défaut ne s'appliquent que si vous n'avez pas défini de valeur personnalisée pour une propriété CSS à l'intérieur. style.
La valeur à l'intérieur de l'élément de texte restera la même pendant toute l'animation si vous ne la mettez pas à jour vous-même. Heureusement, ProgressBar.js fournit également une étape paramètre qui peut être utilisé pour définir une fonction à appeler à chaque étape de l’animation. Puisque cette fonction sera appelée plusieurs fois par seconde, vous devez faire attention à son utilisation et garder les calculs simples..
var lineBar = new ProgressBar.Line ("# ligne-conteneur", strokeWidth: 4, trailWidth: 0.5, from: color: "# FF9900", à: color: "# 00FF99", text: valeur : '0', className: 'progress-text', style: color: 'black', position: 'absolute', en haut: '-30px', remplissage: 0, marge: 0, transformation: null, step : (state, shape) => shape.path.setAttribute ("stroke", state.color); shape.setText (Math.round (shape.value () * 100) + '%');); lineBar.animate (1, duration: 4000); var circleBar = new ProgressBar.Circle ("# circle-container", color: "white", strokeWidth: 2, trailWidth: 25, trailColor: "black", facilité: "easInOut", à partir de color: "# FF9900 ", largeur: 1, à: color:" # FF0099 ", largeur: 25, texte: valeur: '0', nom de classe: 'progress-text', style: couleur: 'noir', position: 'absolute', top: '45% ', left: '42%', remplissage: 0, marge: 0, transformation: null, step: (state, shape) => shape.path.setAttribute ("stroke ", state.color); shape.path.setAttribute (" largeur du trait ", state.width); shape.setText (Math.round (shape.value () * 100) + '%');); circleBar.animate (0,75, durée: 1500); var semiBar = new ProgressBar.SemiCircle ("# semi-conteneur", color: "violet", largeur de trait (2), trailWidth: 8, trailColor: "noir", atténuation: "bounce", from: color: "# FF0099 ", largeur: 1, à: color:" # FF9900 ", largeur: 2, texte: valeur: '0', nom de classe: 'progress-text', style: couleur: 'noir', position: 'absolute', top: '45% ', left: '50%', remplissage: 0, marge: 0, transformation: null, step: (state, shape) => shape.path.setAttribute ("stroke ", state.color); shape.path.setAttribute (" largeur du trait ", state.width); shape.setText (Math.round (shape.value () * 100) + '%');); semiBar.animate (0,75, durée: 2000); Parfois, vous souhaiterez peut-être créer des barres de progression avec différentes formes correspondant au thème général de votre site Web. ProgressBar.js vous permet de créer des barres de progression avec des formes personnalisées à l'aide du Chemin() méthode. Cette méthode fonctionne comme Forme() mais fournit moins de paramètres pour personnaliser l'animation de la barre de progression. Vous pouvez toujours fournir un durée et assouplissement valeur pour l'animation. Si vous souhaitez animer la couleur et la largeur du trait utilisé pour tracer le chemin personnalisé, vous pouvez le faire dans le de et à paramètres.
La bibliothèque ne fournit aucun moyen de tracer une trace pour le chemin personnalisé, comme elle le faisait pour des lignes simples et des cercles. Cependant, vous pouvez créer le sentier vous-même assez facilement. Dans l'exemple suivant, j'ai créé une barre de progression triangulaire à l'aide du Chemin() méthode.
Avant d'écrire le code JavaScript, nous devrons définir notre chemin d'accès SVG personnalisé en HTML. Voici le code que j'ai utilisé pour créer un triangle simple:
Vous avez peut-être remarqué que j'ai créé deux éléments de chemin différents. Le premier chemin a une couleur gris clair qui agit comme le chemin que nous avons vu avec des barres de progression simples dans la section précédente. Le deuxième chemin est celui que nous animons avec notre code. Nous lui avons donné un identifiant qui est utilisé pour l'identifier dans le code JavaScript ci-dessous.
var path = new ProgressBar.Path ("# triangle", durée: 6000, à partir de: color: "# ff0000", width: 2, à: color: "# 0099ff", width: 10, strokeWidth: 4, accélération: "easInOut", étape: (état, forme) => shape.path.setAttribute ("accident vasculaire cérébral", état.color); shape.path.setAttribute ("accident vasculaire cérébral", état.width); ); path.animate (1); Comme vous l'avez vu dans ce didacticiel, ProgressBar.js vous permet de créer facilement différents types de barres de progression. Il vous donne également la possibilité d’animer différents attributs de la barre de progression, tels que sa largeur et sa couleur..
De plus, vous pouvez également utiliser cette bibliothèque pour modifier la valeur d'un élément de texte associé afin d'afficher la progression sous forme textuelle. Ce tutoriel couvre tout ce que vous devez savoir pour créer des barres de progression simples. Cependant, vous pouvez parcourir la documentation pour en savoir plus sur la bibliothèque..
.
