---
title: "Indicadores de progreso y cargadores"
description: "Muestra el progreso por pasos y estados de carga en un flow."
---

La categoría **Progress** ofrece dos tipos de elementos: uno para el progreso por pasos a través de un flow multipantalla, y otro para indicadores de actividad en línea.
## Indicadores de progreso \{#progress-indicators\}

### Estilos de indicador \{#indicator-styles\}

Un elemento **Progress** muestra la posición del usuario en un flow de varias pantallas. La categoría ofrece tres variantes visuales:

- **Linear** — Una barra única que se rellena conforme el usuario avanza.
- **Segmented** — Barras separadas por cada paso que se van rellenando una a una.
- **Connectors** — Círculos con etiquetas conectados por líneas (p. ej., Step 1, Step 2, Step 3 en secuencia).
### Asociar pasos a pantallas

Por defecto, el indicador de progreso hace un seguimiento de todas las pantallas del flow. Para limitarlo a un subconjunto, elige las opciones en el desplegable **Screens**. También puedes abrir la pantalla que quieras excluir y desmarcar la casilla **Include screen in progress indicator**.

Desactiva **One segment per screen** si necesitas un control más preciso sobre el número de pasos.
:::warning
La posición del paso sigue el orden de la lista de pantallas, no el orden en que el usuario las ve realmente. En flows no lineales, el paso mostrado en el indicador puede avanzar o retroceder.
:::
### Estados de los pasos \{#step-states\}

Cada paso tiene tres estados: **Completed**, **Current** y **Upcoming**. Selecciona un paso dentro del Progress Indicator para editar el estilo de un estado en el panel derecho. Usa **Apply changes to all states** para copiar tus cambios a los otros dos.

Editar un paso afecta a todos los pasos dentro del mismo indicador.
## Loaders

Un **Loader** es un elemento animado que indica que hay un proceso en curso: por ejemplo, procesar las respuestas de un cuestionario para preparar un plan personalizado.

La categoría ofrece tres plantillas:

- **Spinner** — Un spinner circular.
- **Spinner with label** — Un spinner circular con una etiqueta (p. ej., "Cargando...").
- **Loader** — Una barra horizontal que se rellena a medida que avanza el proceso.
{/* - **Loader with label** — Una barra horizontal con una etiqueta y porcentaje (p. ej., "Analizando... 47%"). */}
:::warning
Un loader necesita un **desencadenador** para aparecer y desaparecer. Abre la pestaña **Interactions** para configurar esta lógica — por ejemplo, mostrarlo después de que el usuario envíe un cuestionario.
:::