---
title: "Indicateurs de progression et chargements"
description: "Affichez la progression par étapes et les états d'occupation dans un flow."
---

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 \{#progress-indicators\}

### Styles d'indicateur \{#indicator-styles\}

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 \{#match-steps-to-screens\}

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.

:::warning
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 \{#step-states\}

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 \{#layout-and-positioning\}

L'indicateur de progression est un élément global : vous ne pouvez pas le placer dans un [conteneur](builder-containers). 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 \{#loaders\}

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.
{/* - **Loader with label** — A horizontal bar with a caption and percentage (e.g., "Analyzing... 47%"). */}

:::warning
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.
:::