---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/elements/circle-counter'
title: 'Añadir un contador circular | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:13:02+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Obtienes un anillo animado que se rellena para mostrar un número clave, como una tasa o una puntuación. Úsalo para que una estadística destaque en una página de destino o una página sobre nosotros.'
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-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Añadir un contador circular'
      description: 'Obtienes un anillo animado que se rellena para mostrar un número clave, como una tasa o una puntuación. Úsalo para que una estadística destaque en una página de destino o una página sobre nosotros.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:13:02+0000'
      dateModified: '2026-10-24T09:09:48+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/es/hc/documentation/learn-dxpr-builder/elements/circle-counter'
      articleSection: 'Datos y animación'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/elements/circle-counter'
      description: 'Obtienes un anillo animado que se rellena para mostrar un número clave, como una tasa o una puntuación. Úsalo para que una estadística destaque en una página de destino o una página sobre nosotros.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentation) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Añadir contenido](/es/hc/documentation/learn-dxpr-builder/elements) /[Datos y animación](/es/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Añadir un contador circular.

 Aprende DXPR BuilderCrear páginasAñadir contenidoDatos y animación

   ## En esta guía

 Guías relacionadas

- [Cambia el aspecto de un elemento en el panel Style](/es/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

Obtienes un anillo animado que se rellena para mostrar un número clave, como una tasa o una puntuación. Úsalo para que una estadística destaque en una página de destino o una página sobre nosotros.

## Añade un contador circular

Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. [Crea tu primera página](/es/hc/documentation/learn-dxpr-builder/getting-started/first-page) muestra lo básico.

1. Pasa el cursor sobre la columna y haz clic en **+** en su barra de controles, o haz clic en **Add Elements** en una página vacía. Abre la pestaña **Content** y haz clic en **Circle counter**. Queda arriba de la columna y su diálogo de ajustes se abre.
2. Arrastra el deslizador **Percent** para definir cuánto se rellena el anillo, o escribe el valor en el recuadro junto a él. Aquí ponemos 78.
3. Elige el color del arco en **Foreground color**.
4. Abre la sección Circle content y escribe una etiqueta **Text** para la métrica.
5. En el campo **Icon** de abajo, escribe chart en el cuadro **Search** y haz clic en un icono de la cuadrícula.
6. Haz clic en **Save** en el diálogo. Luego haz clic en **Save** en la barra de herramientas arriba de la zona de contenido para guardar la página.

  ## Lo que ves

Un anillo se rellena hasta el porcentaje que definiste, con tu icono y etiqueta en el centro. En el vídeo, es morado, se rellena al 78 por ciento y dice Tasa de renovación. El anillo se anima cuando entra en pantalla al desplazar. Las visitas lo ven cuando guardas la página y está publicada.

## Configura tu contador circular

Pasa el cursor sobre el elemento y abre **More > Settings** en su barra de controles. Opciones:

- **Percent:** cuánto se rellena el anillo, de 0 a 100.
- **Dimension:** el tamaño del círculo en píxeles, de 100 a 500.
- **Foreground color:** el color del arco relleno.
- **Background color:** el color de la pista vacía.
- **Fill color:** el color dentro del círculo.
- **Foreground width:** el grosor del arco.
- **Animation:** rellena el arco desde cero. **Animation duration** y **Animation delay** definen el tiempo en milisegundos.
- **Animation in-viewport:** espera a animar hasta que el círculo entra en pantalla al desplazar.

Cada deslizador tiene un recuadro numérico junto a él para valores exactos. La sección **Circle content** define qué se muestra en el centro:

- **Show progress:** muestra el número de porcentaje en lugar de tu propio texto e icono. Viene desactivado.
- **Text:** una etiqueta corta. **Font size** y **Text color** le dan estilo.
- **Info:** una segunda línea más pequeña bajo el texto.
- **Icon:** un icono delante del texto. El desplegable junto a **Search** limita la cuadrícula a un conjunto de iconos. **Icon size** e **Icon color** le dan estilo.

## Si no lo ves

- **Circle counter no está en la pestaña Content.** Tu perfil de usuario lo oculta. Pide a una cuenta administradora que lo active en [User profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Ya no está tras recargar.** La página no se guardó. Añádelo de nuevo y haz clic en **Save** en la barra de herramientas arriba de la zona de contenido.
- **El anillo se ve tenue o falta.** **Foreground color** y **Background color** están muy cerca del color de la página. Pasa el cursor sobre el elemento y abre **More > Settings**, y elige colores con más contraste.
- **El anillo no se anima.** **Animation** está desactivado, o el anillo espera hasta entrar en pantalla al desplazar. Activa **Animation** y desplaza el círculo hasta verlo.
- **Tu texto e icono no se muestran.** **Show progress** está activo, así que el anillo muestra el porcentaje. Desactiva **Show progress** en **Circle content**.

## ¿Qué sigue?

[Panel Style](/es/hc/documentation/learn-dxpr-builder/element-settings/style-tab) para cambiar espaciado y fondo de tu contador circular.