# Indica el avance con una barra de progreso

> A progress bar is a visual indicator that shows how far someone has gone within a piece of content It starts at 0 empty and fills up as the person moves forw

Source: https://help.genially.com/es/indica-el-avance-con-una-barra-de-progreso-rk11bnQDx

Last updated: 2026-06-18T12:06:02.248Z

Una barra de progreso es un indicador visual que muestra el avance dentro de un contenido. Empieza en 0 (vacío) y se va completando a medida que la persona avanza, hasta llegar a completar el recorrido.

  

Este elemento **permanece fijo** en todas las páginas de la creación y permite ubicarse fácilmente: saber dónde se está, cuánto se ha avanzado y cuánto falta para terminar. Es especialmente útil en contenidos **multipágina**, ya que transforma la navegación en un recorrido claro hacia la meta.

En Genially, la barra de progreso se completa **al avanzar de página**, reflejando un progreso real y proporcional al contenido.

  

## Características principales

La barra de progreso es un elemento flexible y visual, orientado a mejorar la experiencia de navegación:

*   Avanza de forma porcentual al **cambiar de página**. 
*   Por defecto, se aplica a **toda la creación** aunque puedes decidir mostrarla solo en páginas seleccionadas.
*   El porcentaje de progreso al cambiar de página depende del número total de páginas en las que se muestra la barra.
*   Refleja un progreso real, sin decimales, entre diferentes estados: 
    *   Inicial: 0%
    *   En progreso: entre 1% y 99%
    *   Completado: 100%
*   Se puede personalizar el color y el tamaño.
*   La propia barra aporta suficiente información sobre el progreso, así que puedes decidir no mostrar los valores numéricos.
*   Puedes disparar acciones al finalizar, como un efecto o un audio.
    

  

## Cómo añadir una barra de progreso

Añadir una barra de progreso a tu creación es sencillo:

1.  En el menú lateral izquierdo, pulsa **AI Builder**. Dentro encontrarás la sección Navegación. Elige Barra de progreso. 
2.  Se abrirá un menú lateral derecho con varias opciones de configuración. Desde ahí podrás decidir en qué **páginas** mostrarla (en todas o solo páginas seleccionadas) No es necesario copiar y pegar la barra de progreso en otras páginas, tan solo tienes que configurar en qué páginas debe mostrarse. Así evitarás crear barras duplicadas o superpuestas.
3.  También puedes personalizar su estilo, usando los selectores de **colores** para elegirlos a tu gusto.
4.  Por último, puedes añadir acciones que se disparan al completar la barra, como un efecto o reproducir un audio.

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/bdef987b217327a44fc1c3789a97f2e1.gif)

  

## Algunas ideas sobre cómo usar una barra de progreso

La barra de progreso es un recurso versátil que se adapta a distintos tipos de contenidos y objetivos:

1.  **Formaciones o cursos.** Muy útil para motivar a completar módulos, lecciones o actividades y dividir el contenido para hacerlo más alcanzable. 
2.  **Retos o misiones**. Genial para fomentar la participación y el logro de metas.
3.  **Consumo de contenidos**. Esencial para medir la lectura o navegación y ver el porcentaje completado.
4.  **S****ecuencias o pasos**. Sirve para guiar a los usuarios en procesos secuenciales, como formularios, encuestas o itinerarios.

  

Ya has visto que la barra de progreso no solo informa: **motiva, orienta y acompaña**. Convierte la experiencia en un recorrido claro hacia una meta y ayuda a que más personas lleguen hasta el final.