Progress bar
Comunica el avance de una tarea determinada. Úsala cuando puedas calcular un porcentaje real; si no lo conoces, prefiere un spinner.
Default
Cuándo usar
- Subida, descarga o procesamiento de archivos con tamaño conocido.
- Onboarding o formularios largos con pasos contables.
- Importaciones por lote donde puedes contar registros procesados.
Colores Lexy
Paleta de marca
El degradé Lexy (morado primario → lavanda → morado primario) está aplicado por defecto. Para tareas que cambian de tono según el resultado, usa los variants semánticos de la sección siguiente.
Estados
Éxito, alerta y error
Cambia el color al alcanzar umbrales relevantes: por ejemplo, error cuando una subida supera el límite o éxito al completar.
Accesibilidad
Lectores de pantalla
- Radix renderiza role="progressbar" con aria-valuenow, aria-valuemin y aria-valuemax automáticamente.
- Acompaña la barra con un texto visible que diga qué se está procesando y qué porcentaje lleva.
- Si la tarea tarda más de 1 segundo, muestra la barra; si menos, omítela para no distraer.