CMS: agregar y configurar una barra de progreso
9 min
Agrega una barra de progreso para mostrar una representación visual del progreso hacia el logro de un objetivo. Puedes usar la codificación de Velo o un campo de colección del CMS para representar el valor de progreso. Para el valor objetivo, puedes establecer un valor estático que no cambie, o bien un valor dinámico con Velo o conectando un campo de la colección.
Ejemplos del uso de las barras de progreso:
- Muestra cuántas tareas están marcadas como "hechas" en una lista de tareas pendientes.
- Muestra el porcentaje de pasos completados durante un proceso de incorporación.
- Muestra la cantidad de dinero recaudado para un objetivo de recaudación de fondos.
- Muestra el número de firmantes de una petición que necesita una determinada cantidad de votos.
Consejo:
Puedes usar Velo para actualizar el valor de la barra de progreso sin conectarte al CMS. Para aprender cómo hacerlo, consulta la documentación sobre cómo trabajar con la API de la barra de progreso (contenido en inglés).
Antes de comenzar:
Agrega el CMS a tu sitio y crea una colección que incluya un tipo de campo "Número" para el valor de progreso. Si deseas usar un valor dinámico para el valor objetivo, agrega también un campo "Número" que represente el objetivo.
Para agregar y configurar una barra de progreso:
Editor de Wix
Editor de Wix Studio
- Ve al editor.
- Asegúrate de haber habilitado Velo en el editor:
- Haz clic en Modo desarrollador en la parte superior.
- Haz clic en Activar.
- Haz clic en Agregar elementos
a la izquierda del editor. - Haz clic en Interactivo.
- Haz clic en Barra de progreso debajo de Indicadores.
- Haz clic en la barra de progreso de tu elección y arrástrala a la página.
- Haz clic en Ajustes en la barra de progreso.
- Ingresa una Etiqueta que permita a los visitantes y a los lectores de pantalla saber lo que representa la barra (por ejemplo, "Progreso hacia el objetivo").
- Elige si deseas establecer el valor objetivo como un valor dinámico o estático:
Valor objetivo dinámico
en el elemento Barra de progreso. 
para editar y personalizar el estilo de la barra:
y elige un diseño preestablecido o personaliza aún más el diseño existente. Valor objetivo estático
