> ## Documentation Index
> Fetch the complete documentation index at: https://apidoc.crowdchange.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget de progression

> Intégrez le widget de progression CrowdChange pour afficher en direct une barre de progression de campagne, avec couleurs et libellés personnalisables.

Le widget `progress` affiche en direct une barre de progression montrant le montant amassé par une campagne par rapport à son objectif. Il s'affiche en ligne et peut suivre une collecte de fonds entière, une équipe précise ou une page personnelle individuelle.

Nouveau avec les widgets? Commencez par [l'aperçu des widgets](/widgets/overview) pour ajouter le script d'intégration.

![CrowdChange progress widget](https://files.readme.io/7ae815e2465944943c7e6e0e051d8d94b88f32d5de7fbb41fa6fd0ae5ac5ab22-image.png)

## Exemple d'utilisation

### Progression de la collecte de fonds

```html theme={null}
<crowdchange widget="progress"
             fundraiser="1000"
             show-name="true"
             color-text="#ffffff"
             color-primary="#e43d31"
             color-background="#212944"
             progress-bar-color="#e43d31"
></crowdchange>
```

***

## Paramètres pris en charge

| Paramètre JS       | Attribut d'élément   | Description                                                                                         | Valeur par défaut              |
| :----------------- | :------------------- | :-------------------------------------------------------------------------------------------------- | :----------------------------- |
| `widget`           | `widget`             | Type de widget : `progress`.                                                                        | Obligatoire                    |
| `fundraiser`       | `fundraiser`         | L'ID de la collecte de fonds.                                                                       | \*                             |
| `fundraiserTeam`   | `fundraiser-team`    | L'ID de l'équipe.                                                                                   | \*                             |
| `fundraiserPage`   | `fundraiser-page`    | L'ID de la page personnelle.                                                                        | \*                             |
| `showName`         | `show-name`          | Afficher le nom de la collecte de fonds, de l'équipe ou de la page personnelle : `true` ou `false`. | `false`                        |
| `language`         | `language`           | Le code de langue, p. ex. `en`, `fr`.                                                               | `en`                           |
| `colorPrimary`     | `color-primary`      | Couleur primaire.                                                                                   | Thème de la collecte de fonds. |
| `colorText`        | `color-text`         | Couleur du texte.                                                                                   | Thème de la collecte de fonds. |
| `colorBackground`  | `color-background`   | Couleur d'arrière-plan.                                                                             | Thème de la collecte de fonds. |
| `progressBarColor` | `progress-bar-color` | Couleur de la barre de progression.                                                                 | Thème de la collecte de fonds. |

<Note>
  Fournissez **un seul** des ID suivants pour choisir ce que le widget doit suivre :

  * `fundraiser` — progression de la collecte de fonds globale.
  * `fundraiser-team` — progression d'une équipe précise.
  * `fundraiser-page` — progression d'une page personnelle précise.

  Si vous ne fournissez aucun de ces ID, le widget affiche la progression globale de votre site.
</Note>