Definición
Las barras de progreso permiten mostrar de forma gráfica el avance de una tarea o proceso que está desarrollando el sistema (p.ej. la subida de un archivo). Al usar barras de progreso se disminuye la incertidumbre de la persona que espera el resultado, que puede anticipar cuánto falta y cuánto tiempo tardará.
Anatomía
Las partes del componente son:
- Etiqueta: Título descriptivo del proceso de carga en curso
- Barra de avance: Barra que representa el porcentaje de avance del proceso. Dentro se puede incluir un texto que ofrezca información de progreso más detallada. (MB, %, número)
- Barra de total: Representa el total del proceso, sobre la que va incrementándose la barra de avance.
- Texto de ayuda (opcional, salvo error): Texto de ayuda que indica información adicional sobre el proceso que se está llevando a cabo.
Tipos
Por defecto
Pautas de uso
Utiliza la barra de progreso solo si puedes mostrar el avance real
No utilices barras de progreso en los siguientes casos:
- Si no puedes calcular o presentar el porcentaje de avance, utiliza en su lugar un icono giratorio (spinner).
- Si el avance de la tarea depende de pasos manuales, utiliza un asistente de pasos.
Incluye un retardo en la aparición del elemento
Añade un retraso de 100 ms antes de mostrar la barra de progreso. De esta forma, evitarás que aparezca cuando el proceso se realice de forma muy rápida.
Evita que la persona usuaria interactúe con el interfaz durante el proceso
Mientras la barra de progreso esté activa, no permitas que la persona usuaria interactúe con los controles disponibles (botones, campos, etc.).
Informa del resultado del proceso
- Una vez que el proceso haya terminado, incluye un aviso que indique si ha sido exitoso o ha ocurrido un error.
- Si se produce un error, debe agregarse una notificación de error.
- Si la tarea se ha completado con éxito índicalo mediante una barra de progreso verde con una barra verde completa.
Componentes relacionados
Similar a
Forma parte de:
Recursos asociados al componente
Implementación:
Storybook (solo accesible desde la RCJA)
Control de versiones
| Fecha | Versión | Notas |
|---|---|---|
| 20/03/2026 | 1.3 | Se actualiza la definición y se incorporan pautas de uso |