Barre de progression

L’élément Progress Bar affiche une barre de progression. Vous pouvez contrôler ses paramètres d’affichage, de typographie et d’animation.

Ajouter Progress Bar

Pour ajouter un élément Progress Bar à votre page, cliquez sur +Add > Helpers > Progress Bar.

Progress Amount – Taux de progression

Pour modifier le pourcentage de la barre de progression, faites simplement glisser le cercle le long de la barre de défilement sous Progress.

Progress Bar – Barre de progression

• Bar Color – Couleur de la barre : définit la couleur de la barre de progression couverte par le pourcentage de progression.
• Background Color – Couleur de fond : définit la couleur non couverte par le pourcentage de progression.
• Bar Padding – Marges intérieures : définit le retrait de tous les côtés dans la barre de progression.
• Stripes – Rayures : définissez ce paramètre sur true pour afficher des rayures diagonales dans l’élément de barre de progression.

Animation

Les paramètres d’animation de la Progress Bar peuvent être contrôlés dans cette section.
Par défaut, tous les paramètres d’animation sont définis sur false.
Les paramètres suivants peuvent être modifiés pour animer la barre de progression et ses bandes, le cas échéant:

• Animation Stripes – Animation des zébras : pour animer les zébras, définissez cette option sur true.
• Animation Width – Largeur de l’animation : pour animer la croissance de la barre de progression jusqu’au pourcentage défini, définissez cette option sur true.
• Animation Stripes Duration – Durée des bandes d’animation : ce paramètre détermine le temps nécessaire pour que deux bandes se déplacent dans la barre de progression (en secondes).
• Animation Width Duration – Durée de remplissage de l’animation : ce paramètre détermine le temps nécessaire à la barre de progression pour atteindre le pourcentage défini (en secondes).

Typography

Dans cet onglet, vous pouvez contrôler la typographie des deux ensembles de texte dans l’élément Barre de progression : texte de gauche et texte de droite.

Chaque ensemble a des paramètres de typographie identiques, pareils à ceux trouvés dans Advanced > Typography.

Greg C. / Ph. Reskator