Sistema de diseño
Progress bar
Elemento visual utilizado para indicar el avance o progreso de una tarea, proceso o actividad en la interfaz de usuario.
Figma
Storybook
AEM
Overview
Esta barra ofrece retroalimentación visual sobre el progreso de una acción o el tiempo restante para completarla. A medida que la tarea avanza, el elemento visual se va llenando gradualmente, proporcionando una representación visual clara del progreso.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Dado que el sistema ofrece opciones de fondo claras y oscuras, el componente progress bar cuenta con variantes en ambos tonos. Esto garantiza que se adapte correctamente, sin importar el color de fondo.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Cada una de las variantes del componente progress bar tiene las siguientes opciones de configuración:
Percentage
El componente puede mostrar el porcentaje de progreso completado y, por defecto, está configurado para hacerlo.
Link
Por defecto, la progress bar incluye un enlace a la izquierda que permite a los usuarios volver al paso anterior del proceso que están completando.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Resizing
La progress bar ocupa el ancho completo del contenedor en el que se encuentra. En los breakpoints XS y S, se ajusta al ancho del dispositivo.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes