Indicateurs de progression et chargements
La catégorie Progress propose deux types d’éléments : l’un pour suivre la progression par étapes dans un flow multi-écrans, l’autre pour afficher des indicateurs d’occupation en place.
Indicateurs de progression
Styles d’indicateur
Un élément Progress indique à l’utilisateur sa position dans un flow multi-écrans. La catégorie propose trois variantes visuelles :
- Linear — Une barre unique qui se remplit au fur et à mesure que l’utilisateur avance.
- Segmented — Des barres séparées pour chaque étape, qui se remplissent une par une.
- Connectors — Des cercles numérotés reliés par des lignes (ex. : Étape 1, Étape 2, Étape 3 dans l’ordre).
Associer les étapes aux écrans
Par défaut, l’indicateur de progression suit tous les écrans du flow. Pour le limiter à un sous-ensemble, sélectionnez les écrans dans la liste déroulante Screens. Vous pouvez aussi ouvrir l’écran à exclure et décocher la case Include screen in progress indicator.
Désactivez One segment per screen si vous souhaitez contrôler plus finement le nombre d’étapes.
La position de l’étape suit l’ordre de la liste d’écrans, pas l’ordre dans lequel l’utilisateur les voit réellement. Dans les flows non linéaires, l’étape affichée par l’indicateur peut sauter en avant ou revenir en arrière.
États des étapes
Chaque étape possède trois états : Completed, Current et Upcoming. Sélectionnez une étape dans l’indicateur de progression pour modifier le style d’un état dans le panneau de droite. Utilisez Apply changes to all states pour appliquer vos modifications aux deux autres états.
La modification d’une étape affecte toutes les étapes du même indicateur.
Mise en page et positionnement
L’indicateur de progression est un élément global : vous ne pouvez pas le placer dans un conteneur. Son positionnement n’est pas non plus configurable — il utilise un positionnement absolu par défaut. Lorsque l’utilisateur fait défiler l’écran, l’indicateur reste en place et le contenu défile dessous.
Pour gérer l’espace autour de l’indicateur, utilisez les contrôles Margin et Padding de la section Spacing plutôt que de déplacer l’élément. Si la mise en page semble incorrecte, ajustez les marges ou le padding de l’indicateur et de l’élément voisin.
Chargements
Un Loader est un élément animé qui indique qu’une opération est en cours — par exemple, le traitement des réponses d’un quiz pour préparer un plan personnalisé.
La catégorie propose trois modèles :
- Spinner — Un indicateur circulaire animé.
- Spinner with label — Un indicateur circulaire avec une légende (ex. : « Chargement… »).
- Loader — Une barre horizontale qui se remplit au fil de l’avancement.
Un loader nécessite un déclencheur pour apparaître et disparaître. Ouvrez l’onglet Interactions pour configurer cette logique — par exemple, l’afficher après que l’utilisateur a soumis un quiz.