# Composants de retour d'information

Les composants de retour d'information communiquent la progression et l'état de chargement : une barre/cercle de progression, un spinner et des espaces réservés skeleton. Tous acceptent l'ensemble partagé `props` ainsi que les modules `visibility` et `responsive`.

```yaml
components:
  - type: progress
    progressValue: 60
    progressMax: 100
    props: { showLabel: true, size: sm }
  - type: skeleton
    skeletonVariant: rectangular
    props: { animate: true }
```

## `progress`

Un indicateur de progression déterminé, rendu comme une barre ou un cercle.

| Propriété               | Description                                                             |
| ----------------------- | ----------------------------------------------------------------------- |
| `progressValue`         | Valeur courante (0 à `progressMax`).                                    |
| `progressMax`           | Valeur maximale (défaut : 100).                                         |
| `props.showLabel`       | Afficher le libellé de pourcentage.                                     |
| `props.size`            | Préréglage de taille (p. ex. `sm` pour une barre plus fine).            |
| `props.progressVariant` | `circle` rend une progression circulaire avec le pourcentage au centre. |

## `spinner`

Un spinner de chargement indéterminé pour les attentes courtes.

| Propriété    | Description                                                          |
| ------------ | -------------------------------------------------------------------- |
| `props.size` | Préréglage de taille du spinner.                                     |
| `props`      | Attributs HTML supplémentaires (p. ex. `className` pour la couleur). |

## `skeleton`

Un espace réservé de chargement avec une forme affiché pendant que le contenu se charge.

| Propriété         | Description                                     |
| ----------------- | ----------------------------------------------- |
| `skeletonVariant` | Forme : `text`, `circular`, ou `rectangular`.   |
| `skeletonWidth`   | Largeur CSS (p. ex. `200px`, `100%`).           |
| `skeletonHeight`  | Hauteur CSS (p. ex. `20px`, `3rem`).            |
| `props.animate`   | Activer l'animation pulsante (défaut : `true`). |

## Pages connexes

- [Présentation des pages](/fr/docs/pages-overview) — le modèle de composants.
- [Composants de superposition](/fr/docs/overlay-components) — `progress` et `skeleton` sont aussi adjacents aux superpositions.
- [Interactivité et scripts](/fr/docs/interactivity-scripts) — indicateurs de statut de sauvegarde automatique.
- [Composants de données](/fr/docs/data-components) — états de chargement pour les composants liés à des données.