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.