Añadir una barra de progreso.

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 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.
• 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 para cambiar espaciado y fondo de tu barra de progreso.