FeedbackDisponible

Progress

Indicador accesible para avance en cursos, tareas y flujos por etapas.

Lesson 168%

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/progress.json

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

import { Progress } from "@/components/ui/progress"

export function Example() {
  return <Progress value={68} label="Lesson 1" showValue />
}

Opciones visuales incluidas en la API oficial del componente.

Lesson 168%

Practice complete100%

Aspecto, comportamiento y comprobación con teclado.

Distingue carga, progreso, éxito, error y ausencia de datos según el componente. Mantén el mensaje comprensible sin color.
El indicador no necesita hover. Solo sus acciones o controles de cierre reciben foco. Respeta la preferencia de movimiento reducido.

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
value	number \| null	0	Valor limitado entre 0 y 100; null o un número no finito representa progreso indeterminado.
label	string	—	Etiqueta visible y nombre accesible.
aria-label	string	Progress	Nombre accesible cuando no hay etiqueta visible.
showValue	boolean	false	Muestra el porcentaje al usuario.

Reglas que deben conservarse cuando el componente se adapte a un producto.

Expone role progressbar y valores mínimo, máximo y actual.

Usa label o aria-label para indicar qué está progresando.

Los cambios animados respetan prefers-reduced-motion.