---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/barra-progreso'
title: 'Añadir una barra de progreso | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:13:43+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Obtienes una barra de color con una etiqueta que muestra de un vistazo cuánto avanzó algo. Úsala para estado de proyectos, metas de recaudación, progreso de cursos o niveles de habilidad.'
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: 'Añadir una barra de progreso'
      description: 'Obtienes una barra de color con una etiqueta que muestra de un vistazo cuánto avanzó algo. Úsala para estado de proyectos, metas de recaudación, progreso de cursos o niveles de habilidad.'
      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:43+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/es/hc/documentacion/aprender-dxpr-builder/elementos/barra-progreso'
      articleSection: 'Datos y animación'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/barra-progreso'
      description: 'Obtienes una barra de color con una etiqueta que muestra de un vistazo cuánto avanzó algo. Úsala para estado de proyectos, metas de recaudación, progreso de cursos o niveles de habilidad.'
      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/documentacion) /[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 una barra de progreso.

 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/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style)

Obtienes una barra de color con una etiqueta que muestra de un vistazo cuánto avanzó algo. Úsala para estado de proyectos, metas de recaudación, progreso de cursos o niveles de habilidad.

## Añade una barra de progreso

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/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina) 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 **Progress bar**. Queda arriba de la columna y su diálogo de ajustes se abre.
2. Escribe un **Label** para la barra, como "Website redesign".
3. Arrastra **Progress** para definir cuánto se rellena la barra, o escribe el valor en el recuadro junto al deslizador. Aquí elegimos 73 por ciento.
4. Elige un **Front color** para la parte rellena desde la paleta.
5. Más abajo en el mismo diálogo, elige si la barra lleva **Stripes**. Aquí marcamos **Add striped pattern to bar**.
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

Una barra con tu etiqueta se rellena hasta el valor que definiste, en el color que elegiste. La etiqueta queda dentro de la parte rellena. En el vídeo, la barra a rayas dice Website redesign y rellena el 73 % de su pista. Las visitas la ven cuando guardas la página y está publicada.

## Configura tu barra de progreso

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

- **Label:** el texto de la barra. También puedes hacer clic en la etiqueta en la página y editarla allí.
- **Progress:** cuánto se rellena la barra, de 0 a 100 por ciento. El valor predeterminado es 50.
- **Bar height:** el alto de la barra en píxeles. El valor predeterminado es 45.
- **Back color:** el color de la pista vacía.
- **Front color:** el color de la parte rellena.
- **Grow animation:** desactivado por defecto. Cuando está activo, la barra empieza vacía y se rellena cuando la mitad entra en vista.
- **Stripes:** **Add striped pattern to bar** añade rayas diagonales. **Animate stripes (requires striped pattern)** las mueve.

## Si no lo ves

- **Progress bar no está en la pestaña Content.** Tu perfil de usuario lo oculta. Pide a una cuenta administradora que lo active en [User profiles](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion).
- **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.
- **La barra se ve vacía.** **Progress** es 0, o **Grow animation** está activo y la barra aún no entra a medias en vista. Desplázate hasta la barra, o pasa el cursor sobre el elemento y abre **More > Settings** para subir **Progress**.
- **No hay rayas, o no se mueven.** **Add striped pattern to bar** no está marcado, y **Animate stripes (requires striped pattern)** lo necesita. Marca **Add striped pattern to bar** en **Stripes**.
- **La parte rellena se funde con la pista.** **Front color** y **Back color** son muy parecidos. Elige un **Front color** más oscuro o un **Back color** más claro.

## ¿Qué sigue?

[Panel Style](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style) para cambiar espaciado y fondo de tu barra de progreso.