# Progress bar Comunica el avance de una tarea determinada. Úsala cuando puedas calcular un porcentaje real; si no lo conoces, prefiere un spinner. ```tsx import { Progress } from "@/components/ui/progress"; ``` ## 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. ```tsx {/* El degradé Lexy es el variant por defecto. */} ``` ## 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. ```tsx ``` ## 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.