---
url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/elementi/contatore-circolare'
title: 'Aggiungere un contatore circolare | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:42:47+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Ottieni un anello animato che si riempie per mostrare un numero chiave, come un tasso o un punteggio. Usalo per far risaltare una statistica in una landing page o in una pagina chi siamo.'
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: 'Aggiungere un contatore circolare'
      description: 'Ottieni un anello animato che si riempie per mostrare un numero chiave, come un tasso o un punteggio. Usalo per far risaltare una statistica in una landing page o in una pagina chi siamo.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:42:47+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/it/hc/documentazione/impara-dxpr-builder/elementi/contatore-circolare'
      articleSection: 'Dati e movimento'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/elementi/contatore-circolare'
      description: 'Ottieni un anello animato che si riempie per mostrare un numero chiave, come un tasso o un punteggio. Usalo per far risaltare una statistica in una landing page o in una pagina chi siamo.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Aggiungi contenuti](/it/hc/documentation/learn-dxpr-builder/elements) /[Dati e movimento](/it/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Aggiungere un contatore circolare.

 Impara DXPR BuilderCrea le pagineAggiungi contenutiDati e movimento

   ## In questa guida

 Guide correlate

- [Cambiare l’aspetto di un elemento nel pannello Stile](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/scheda-stile)

Ottieni un anello animato che si riempie per mostrare un numero chiave, come un tasso o un punteggio. Usalo per far risaltare una statistica in una landing page o in una pagina chi siamo.

## Aggiungere un contatore circolare

Apri la tua pagina dopo aver effettuato l’accesso: i controlli del builder appaiono quando passi sopra l’area di contenuto. [La tua prima pagina](/it/hc/documentazione/impara-dxpr-builder/per-iniziare/prima-pagina) spiega le basi.

1. Passa sopra la colonna e fai clic su **+** nella sua barra di controllo, oppure fai clic su **Aggiungi elementi** in una pagina vuota. Apri la scheda **Contenuto** e fai clic su **Contatore circolare**. Arriva in cima alla colonna e si apre la sua finestra delle impostazioni.
2. Trascina il cursore **Percentuale** per impostare quanto si riempie l’anello, oppure digita il valore nel riquadro accanto. Qui impostiamo 78.
3. Scegli il colore dell’arco in **Colore di primo piano**.
4. Apri la sezione Contenuto del cerchio e digita un’etichetta **Testo** per la metrica.
5. Nel campo **Icona** sotto, digita chart nel riquadro **Cerca** e fai clic su un’icona nella griglia.
6. Fai clic su **Salva** nella finestra. Poi fai clic su **Salva** nella barra in cima all’area di contenuto per conservare la pagina.

  ## Cosa vedi

Un anello si riempie fino alla percentuale impostata, con icona ed etichetta in mezzo. Nel video, è viola, si riempie al 78 percento e dice Tasso di rinnovo. L’anello si anima quando scorre nella vista. I visitatori lo vedono quando salvi la pagina ed è pubblicata.

## Configurare il contatore circolare

Passa sopra l’elemento e apri **Altro > Impostazioni** nella sua barra di controllo. Opzioni:

- **Percentuale:** quanto si riempie l’anello, da 0 a 100.
- **Dimensione:** la dimensione del cerchio in pixel, da 100 a 500.
- **Colore di primo piano:** il colore dell’arco riempito.
- **Colore di sfondo:** il colore della traccia vuota.
- **Colore di riempimento:** il colore dentro il cerchio.
- **Spessore dell’arco:** lo spessore dell’arco.
- **Animazione:** riempie l’arco da zero. **Durata dell’animazione** e **Ritardo dell’animazione** impostano i tempi in millisecondi.
- **Animazione nella vista:** attende di animare finché il cerchio scorre nella vista.

Ogni cursore ha un riquadro numerico accanto per valori esatti. La sezione **Contenuto del cerchio** imposta cosa si mostra in mezzo:

- **Mostra avanzamento:** mostra il numero della percentuale invece del tuo testo e della tua icona. È disattivato per impostazione predefinita.
- **Testo:** un’etichetta corta. **Dimensione del carattere** e **Colore del testo** lo stilizzano.
- **Info:** una seconda riga più piccola sotto il testo.
- **Icona:** un’icona davanti al testo. Il menu a discesa accanto a **Cerca** limita la griglia a un set di icone. **Dimensione dell’icona** e **Colore dell’icona** la stilizzano.

## Se non lo vedi

- **Contatore circolare non è nella scheda Contenuto.** Il tuo profilo utente lo nasconde. Chiedi a un amministratore di abilitarlo in [Profili utente](/it/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Non c’è più dopo un ricaricamento.** La pagina non è stata salvata. Aggiungilo di nuovo e fai clic su **Salva** nella barra in cima all’area di contenuto.
- **L’anello è pallido o manca.** **Colore di primo piano** e **Colore di sfondo** sono troppo vicini al colore della pagina. Passa sopra l’elemento e apri **Altro > Impostazioni**, poi scegli colori con più contrasto.
- **L’anello non si anima.** **Animazione** è disattivata, oppure l’anello attende di scorrere nella vista. Attiva **Animazione** e scorri il cerchio nella vista.
- **Testo e icona non si mostrano.** **Mostra avanzamento** è attivo, così l’anello mostra la percentuale. Spegni **Mostra avanzamento** sotto **Contenuto del cerchio**.

## Passi successivi

[Scheda Stile](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/scheda-stile) per cambiare spaziatura e sfondo del contatore circolare.