---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/compteur-circulaire'
title: 'Ajouter un compteur circulaire | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:41:23+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Vous obtenez un anneau animé qui se remplit pour afficher un chiffre clé, comme un taux ou un score. Utilisez-le pour faire ressortir une statistique sur une page de destination ou une page à propos.'
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 un compteur circulaire'
      description: 'Vous obtenez un anneau animé qui se remplit pour afficher un chiffre clé, comme un taux ou un score. Utilisez-le pour faire ressortir une statistique sur une page de destination ou une page à propos.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:41:23+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/compteur-circulaire'
      articleSection: 'Données et animation'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/compteur-circulaire'
      description: 'Vous obtenez un anneau animé qui se remplit pour afficher un chiffre clé, comme un taux ou un score. Utilisez-le pour faire ressortir une statistique sur une page de destination ou une page à propos.'
      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 un compteur circulaire.

 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 un anneau animé qui se remplit pour afficher un chiffre clé, comme un taux ou un score. Utilisez-le pour faire ressortir une statistique sur une page de destination ou une page à propos.

## Ajouter un compteur circulaire

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 **Compteur circulaire**. L’élément apparaît en haut de la colonne et sa boîte de dialogue de paramètres s’ouvre.
2. Faites glisser le curseur **Percent** pour définir le remplissage de l’anneau, ou saisissez la valeur dans la case voisine. Ici, nous saisissons 78.
3. Choisissez la couleur de l’arc dans **Foreground color**.
4. Ouvrez la section Circle content et saisissez un libellé **Text** pour l’indicateur.
5. Dans le champ **Icon** ci-dessous, saisissez chart dans la case **Search** et cliquez sur une icône de la grille.
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

L’anneau se remplit jusqu’au pourcentage défini, avec votre icône et votre libellé au centre. Dans la vidéo, il est violet, rempli à 78 pour cent et affiche Renewal rate. L’anneau s’anime lorsqu’il entre dans la zone visible. Les visiteurs le voient une fois la page enregistrée et publiée.

## Configurer votre compteur circulaire

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

- **Percent :** le remplissage de l’anneau, de 0 à 100.
- **Dimension :** la taille du cercle en pixels, de 100 à 500.
- **Foreground color :** la couleur de l’arc rempli.
- **Background color :** la couleur de la piste vide.
- **Fill color :** la couleur à l’intérieur du cercle.
- **Foreground width :** l’épaisseur de l’arc.
- **Animation :** remplit l’arc depuis zéro. **Animation duration** et **Animation delay** définissent le minutage en millisecondes.
- **Animation in-viewport :** attend que le cercle entre dans la zone visible pour animer.

Chaque curseur a une case numérique voisine pour des valeurs exactes. La section **Circle content** définit ce qui s’affiche au centre :

- **Show progress :** affiche le nombre du pourcentage au lieu de votre texte et de votre icône. Désactivé par défaut.
- **Text :** un libellé court. **Font size** et **Text color** le mettent en forme.
- **Info :** une deuxième ligne plus petite sous le texte.
- **Icon :** une icône devant le texte. Le menu déroulant à côté de **Search** limite la grille à un jeu d’icônes. **Icon size** et **Icon color** la mettent en forme.

## Si rien ne s’affiche

- **Le compteur circulaire ne figure pas dans l’onglet Contenu.** Votre profil d’utilisateur le masque. Demandez à un administrateur de l’activer dans [Profils d’utilisateurs](/fr/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Il a disparu après rechargement.** La page n’a pas été enregistrée. Ajoutez-le de nouveau et cliquez sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu.
- **L’anneau est pâle ou absent.** **Foreground color** et **Background color** sont trop proches de la couleur de la page. Survolez l’élément et ouvrez **Plus > Paramètres**, puis choisissez des couleurs plus contrastées.
- **L’anneau ne s’anime pas.** **Animation** est désactivé, ou l’anneau attend d’entrer dans la zone visible. Activez **Animation** et faites défiler pour amener le cercle dans la zone visible.
- **Votre texte et votre icône ne s’affichent pas.** **Show progress** est activé, l’anneau affiche donc le pourcentage. Désactivez **Show progress** sous **Circle content**.

## 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 compteur circulaire.