---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/contador-circular'
title: 'Adicionar um contador circular | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:10:49+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Obtém um anel animado que se preenche para mostrar um número importante, como uma taxa ou uma pontuação. Utilize-o para destacar uma estatística numa landing page ou numa página institucional.'
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: 'Adicionar um contador circular'
      description: 'Obtém um anel animado que se preenche para mostrar um número importante, como uma taxa ou uma pontuação. Utilize-o para destacar uma estatística numa landing page ou numa página institucional.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:10:49+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/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/contador-circular'
      articleSection: 'Dados e movimento'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/contador-circular'
      description: 'Obtém um anel animado que se preenche para mostrar um número importante, como uma taxa ou uma pontuação. Utilize-o para destacar uma estatística numa landing page ou numa página institucional.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Adicionar conteúdos](/pt-pt/hc/documentation/learn-dxpr-builder/elements) /[Dados e movimento](/pt-pt/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adicionar um contador circular.

 Aprender DXPR BuilderCriar páginasAdicionar conteúdosDados e movimento

   ## Neste guia

 Guias relacionados

- [Altere o aspeto de um elemento no painel Style](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/separador-de-estilo)

Obtém um anel animado que se preenche para mostrar um número importante, como uma taxa ou uma pontuação. Utilize-o para destacar uma estatística numa landing page ou numa página institucional.

## Adicionar um contador circular

Abra a sua página com sessão iniciada: os controlos do construtor aparecem quando paira o cursor sobre a área de conteúdo. [Crie a sua primeira página](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina) mostra o essencial.

1. Paire o cursor sobre a coluna e clique em **+** na barra de controlos, ou clique em **Add Elements** numa página vazia. Abra o separador **Content** e clique em **Circle counter**. O elemento é colocado no topo da coluna e o diálogo de definições abre.
2. Arraste o cursor de **Percent** para definir até onde o anel se preenche, ou escreva o valor na caixa ao lado. Aqui definimos 78.
3. Escolha a cor do arco em **Foreground color**.
4. Abra a secção Circle content e escreva um rótulo em **Text** para a métrica.
5. No campo **Icon** abaixo, escreva chart na caixa **Search** e clique num ícone na grelha.
6. Clique em **Save** no diálogo. Depois clique em **Save** na barra de ferramentas no topo da área de conteúdo para guardar a página.

  ## O que vê

O anel preenche-se até à percentagem que definiu, com o seu ícone e rótulo no meio. No vídeo, é roxo, preenche-se até 78 por cento e diz Renewal rate. O anel anima quando entra na vista por deslocamento. Os visitantes veem-no depois de guardar a página e de esta ser publicada.

## Configurar o contador circular

Paire o cursor sobre o elemento e abra **More > Settings** na barra de controlos. Opções:

- **Percent:** até onde o anel se preenche, de 0 a 100.
- **Dimension:** o tamanho do círculo em píxeis, de 100 a 500.
- **Foreground color:** a cor do arco preenchido.
- **Background color:** a cor da faixa vazia.
- **Fill color:** a cor dentro do círculo.
- **Foreground width:** a espessura do arco.
- **Animation:** preenche o arco a partir do zero. **Animation duration** e **Animation delay** definem o tempo em milissegundos.
- **Animation in-viewport:** espera para animar até o círculo entrar na vista por deslocamento.

Cada cursor tem uma caixa de número ao lado para valores exatos. A secção **Circle content** define o que aparece no meio:

- **Show progress:** mostra o número da percentagem em vez do seu texto e ícone. Vem desligado por predefinição.
- **Text:** um rótulo curto. **Font size** e **Text color** dão-lhe estilo.
- **Info:** uma segunda linha mais pequena por baixo do texto.
- **Icon:** um ícone à frente do texto. O menu pendente junto a **Search** limita a grelha a um conjunto de ícones. **Icon size** e **Icon color** dão-lhe estilo.

## Se não o vir

- **O Circle counter não está no separador Content.** O seu perfil de utilizador oculta-o. Peça a um administrador para o ativar em [User Profiles](/pt-pt/hc/documentacao/aprender-dxpr-builder/administracao/administracao-de-perfis-de-utilizador).
- **Desapareceu depois de recarregar.** A página não foi guardada. Adicione-o novamente e clique em **Save** na barra de ferramentas no topo da área de conteúdo.
- **O anel está esbatido ou em falta.** **Foreground color** e a **Background color** estão demasiado próximas da cor da página. Paire o cursor sobre o elemento e abra **More > Settings**, depois escolha cores com mais contraste.
- **O anel não anima.** **Animation** está desligado, ou o anel espera até entrar na vista por deslocamento. Ligue o **Animation** e desloque o círculo para dentro da vista.
- **O seu texto e ícone não aparecem.** **Show progress** está ligado, por isso o anel mostra a percentagem. Desligue o **Show progress** em **Circle content**.

## E a seguir?

[Separador Style](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/separador-de-estilo) para alterar o espaçamento e o fundo do seu contador circular.