---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/barre-de-progression'
title: 'Ajouter une barre de progression | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:42:02+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Vous obtenez une barre colorée avec un libellé qui montre d’un coup d’œil l’avancement de quelque chose. Utilisez-la pour l’état d’un projet, des objectifs de collecte, la progression d’un cours ou des niveaux de compétence.'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Ajouter une barre de progression'
      description: 'Vous obtenez une barre colorée avec un libellé qui montre d’un coup d’œil l’avancement de quelque chose. Utilisez-la pour l’état d’un projet, des objectifs de collecte, la progression d’un cours ou des niveaux de compétence.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:42:02+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/barre-de-progression'
      articleSection: 'Données et animation'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/barre-de-progression'
      description: 'Vous obtenez une barre colorée avec un libellé qui montre d’un coup d’œil l’avancement de quelque chose. Utilisez-la pour l’état d’un projet, des objectifs de collecte, la progression d’un cours ou des niveaux de compétence.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Ajouter du contenu](/fr/hc/documentation/learn-dxpr-builder/elements) /[Données et animation](/fr/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Ajouter une barre de progression.

 Apprendre DXPR BuilderCréer des pagesAjouter du contenuDonnées et animation

   ## Dans ce guide

 Guides associés

- [Modifier l’aspect d’un élément dans le panneau Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style)

Vous obtenez une barre colorée avec un libellé qui montre d’un coup d’œil l’avancement de quelque chose. Utilisez-la pour l’état d’un projet, des objectifs de collecte, la progression d’un cours ou des niveaux de compétence.

## Ajouter une barre de progression

Ouvrez votre page une fois la session ouverte : les commandes du constructeur apparaissent au survol de la zone de contenu. [Votre première page](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page) présente les bases.

1. Survolez la colonne et cliquez sur **+** dans sa barre de contrôle, ou cliquez sur **Ajouter des éléments** sur une page vide. Ouvrez l’onglet **Contenu** et cliquez sur **Barre de progression**. L’élément apparaît en haut de la colonne et sa boîte de dialogue de paramètres s’ouvre.
2. Saisissez un **Label** pour la barre, par exemple « Website redesign ».
3. Faites glisser **Progress** pour définir le remplissage de la barre, ou saisissez la valeur dans la case à côté du curseur. Ici, nous choisissons 73 pour cent.
4. Choisissez une **Front color** pour la partie remplie dans la palette.
5. Plus bas dans la même boîte de dialogue, choisissez si la barre reçoit des **Stripes**. Ici, nous cochons **Add striped pattern to bar**.
6. Cliquez sur **Enregistrer** dans la boîte de dialogue, puis sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu pour stocker la page.

  ## Ce que vous voyez

Une barre avec votre libellé se remplit jusqu’à la valeur définie, dans la couleur choisie. Le libellé se trouve dans la partie remplie. Dans la vidéo, la barre à rayures affiche Website redesign et remplit 73 % de sa piste. Les visiteurs la voient une fois la page enregistrée et publiée.

## Configurer votre barre de progression

Survolez l’élément et ouvrez **Plus > Paramètres** dans sa barre de contrôle. Options :

- **Label :** le texte sur la barre. Vous pouvez aussi cliquer sur le libellé sur la page et le modifier là.
- **Progress :** le remplissage de la barre, de 0 à 100 pour cent. La valeur par défaut est 50.
- **Bar height :** la hauteur de la barre en pixels. La valeur par défaut est 45.
- **Back color :** la couleur de la piste vide.
- **Front color :** la couleur de la partie remplie.
- **Grow animation :** désactivé par défaut. Quand elle est activée, la barre démarre vide et se remplit une fois à moitié visible.
- **Stripes :** **Add striped pattern to bar** ajoute des rayures diagonales. **Animate stripes (requires striped pattern)** les fait bouger.

## Si rien ne s’affiche

- **La barre de progression ne figure pas dans l’onglet Contenu.** Votre profil d’utilisateur la masque. Demandez à un administrateur de l’activer dans [Profils d’utilisateurs](/fr/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Elle a disparu après rechargement.** La page n’a pas été enregistrée. Ajoutez-la de nouveau et cliquez sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu.
- **La barre semble vide.** **Progress** est sur 0, ou **Grow animation** est activée et la barre n’est pas encore à moitié visible. Défilez jusqu’à la barre, ou survolez l’élément et ouvrez **Plus > Paramètres** pour augmenter **Progress**.
- **Il n’y a pas de rayures, ou elles ne bougent pas.** **Add striped pattern to bar** n’est pas coché, et **Animate stripes (requires striped pattern)** en a besoin. Cochez **Add striped pattern to bar** sous **Stripes**.
- **La partie remplie se fond dans la piste.** **Front color** et **Back color** sont trop proches. Choisissez une **Front color** plus foncée ou une **Back color** plus claire.

## Et ensuite ?

[Onglet Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style) pour modifier l’espacement et l’arrière-plan de votre barre de progression.