Indicateurs de progression et chargements
La catégorie Progress propose deux types d’éléments : l’un pour la progression par étapes dans un flow multi-écrans, l’autre pour les indicateurs de chargement intégrés.
Indicateurs de progression
Styles d’indicateurs
Un élément Progress indique la position de l’utilisateur dans un flow à plusieurs é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 distinctes pour chaque étape qui se remplissent une à une.
- Connectors — Des cercles étiquetés reliés par des lignes (par ex., Étape 1, Étape 2, Étape 3 dans l’ordre).
Associer les étapes aux écrans
Par défaut, l’indicateur de progression suit chaque écran du flow. Pour le limiter à un sous-ensemble, choisissez dans le menu déroulant 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 avez besoin d’un contrôle plus précis sur le nombre d’étapes.
La position de l’étape suit la liste des é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 avancer ou reculer.
États des étapes
Chaque étape possède trois états : Completed, Current et Upcoming. Sélectionnez une étape dans le Progress Indicator pour modifier le style d’un état dans le panneau de droite. Utilisez Apply changes to all states pour copier vos modifications dans les 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 donc pas le placer dans un conteneur. Vous ne pouvez pas non plus définir sa position — il utilise le positionnement absolu par défaut. Lorsque l’utilisateur fait défiler l’écran, l’indicateur reste en place et le contenu défile en dessous.
Pour contrôler l’espace autour de l’indicateur, utilisez les contrôles Margin et Padding dans la section Spacing plutôt que de déplacer l’élément. Si la mise en page ne semble pas correcte, ajustez la marge ou le rembourrage sur l’indicateur et sur l’élément voisin.
Loaders
Un Loader est un élément animé qui indique qu’une action est en cours : par exemple, le traitement des réponses au quiz pour préparer un plan personnalisé.
La catégorie propose trois modèles :
- Spinner — Un spinner circulaire.
- Spinner with label — Un spinner circulaire avec une légende (ex. : « Chargement… »).
- Loader — Une barre horizontale qui se remplit au fur et à mesure de la progression.
Un loader nécessite un déclencheur pour apparaître et disparaître. Ouvrez l’onglet Interactions pour configurer cette logique — par exemple, affichez-le après que l’utilisateur a soumis un quiz.
Le paramètre Duration d’un loader contrôle la durée de son animation de remplissage ou de rotation, et non le temps d’affichage de l’écran. Un déclencheur On screen appear associé à une action Navigate to screen passe immédiatement à l’écran suivant, sans attendre la fin de l’animation. Pour maintenir un écran de chargement affiché pendant une durée précise, ajoutez un Timer avec un déclencheur On timer end qui navigue vers l’écran suivant. La durée du timer se définit en secondes entières.